在運行時綁定函數以動態創建html元素

Question

我必須使用ajax調用動態創建具有特定類的<ul> html元素，例如class_c 。

class_c由第三方js文件使用，由於它是匿名的（例如$('.class_c').click(function(e){}) ），因此無法更改或手動調用，因此我無法使用jQuery進行綁定.bind() 。

有沒有一種方法可以使用class_c重建所有元素的class_c ，以便新元素可以響應此匿名函數？

Answer 1

如果使用on（）而不是click（），則可以將click句柄綁定到選擇器的所有子元素，即使這些元素將來會創建。 當然，然后您需要一個用於那些“將要創建的元素”的容器，該容器已經在dom中，否則處理程序仍然無法使用...

$('.myContainer').on("click", ".class_c", function(e){});

Answer 2

如果您是說要解雇他們的處理程序，則為它們添加新元素后，他們就不會鈎住該事件，那么除了駭入jQuery內部，我唯一能想到的就是克隆他們已經鈎住的元素之一。事件開啟。

jQuery的clone方法接受一個參數，該參數告訴它復制事件和數據以及節點。 因此，在添加新元素時，您可以執行以下操作：

var clone = $(".class_c").first().clone(true);
clone.html(/*...your content here...*/);
clone.appendTo(/*...some appropriate target...*/);

現場例子

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <ul class="class_c">
    <li>Original - click me!</li>
  </ul>
<script>
  (function() {
    "use strict";

    // "Other" code hooks click on .class_c elements by *cloning* one of
    // the ones that already has the click event hooked, using the `true`
    // argument that tells jQuery to clone event handlers and data
    $(".class_c").click(function() {
      display("Handler triggered for '" + $(this).text() + "'");
    });

    // Your code adds a new .class_c element
    var clone = $(".class_c").first().clone(true);
    clone.html("<li>Clone - click me!</li>");
    clone.appendTo(document.body);

    function display(msg) {
      var p = document.createElement('p');
      p.innerHTML = String(msg);
      document.body.appendChild(p);
    }
  })();
</script>
</body>
</html>

在運行時綁定函數以動態創建html元素

問題描述

2 個解決方案

解決方案1
0 2014-08-14 09:43:22

解決方案2
0 2014-08-14 09:43:56

在運行時綁定函數以動態創建html元素

問題描述

2 個解決方案

解決方案1 0 2014-08-14 09:43:22

解決方案2 0 2014-08-14 09:43:56

解決方案1
0 2014-08-14 09:43:22

解決方案2
0 2014-08-14 09:43:56