在动态创建的html元素的运行时绑定功能

时间:2014-08-14 09:37:47

标签: javascript jquery html

我必须使用ajax调用动态创建一个具有特定类的<ul> html元素,比如class_c

class_c由第三方js文件使用,由于它是匿名的(例如$('.class_c').click(function(e){})),因此既不能更改也不能手动调用,因此我无法使用jQuery {{1}进行绑定}}

有没有办法用.bind()重建所有元素的绑定,以便新元素可以响应这个匿名函数?

2 个答案:

答案 0 :(得分:0)

如果使用on()而不是click(),则可以将单击手柄绑定到选择器的所有子元素,即使将来会创建这些元素。当然,你需要一个容器来存放那些已经在dom中的“要创建的元素”,否则处理程序仍然无法工作......

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

答案 1 :(得分:0)

如果你的意思是想要解雇他们的处理程序,对于你添加的新元素,他们还没有把事件挂钩,然后除了攻击jQuery内部以外我唯一可以提出来的东西与克隆他们已经将事件挂钩的元素之一。

jQuery的clone方法接受一个参数,告诉它克隆事件和数据以及节点。因此,在添加新元素时,您可以这样做:

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

Live Example

<!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>
相关问题