在运行时绑定函数以动态创建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