Question

我已将此设置为将点击绑定到任何动态创建的div中的锚点，其中包含＆＃34; expFold＆＃34;

$('body').ready(function()
{
    $('.expFold').on('click', 'a', function (event) {
    alert('here');      
});
}

我将div硬编码到页面中以检查点击是否正常...

<div class="expFold"><a href="#">▼</a></div>

确实如此。

然而，之后添加的任何div都是这样......

$("#myParentDiv").append('<div class="expFold"><a href="#">▼</a></div>');

...不要回应点击。

为什么他们没有回应，有什么明显的跳跃？

感谢您的时间和帮助。

Answer 1

您需要事件委派。试试这个：

$('#myParentDiv').on('click', '.expFold a', function (event) {
  alert('here');
});

Answer 2

由于您的div动态创建了DOM，因此点击事件将无法用于这些链接。在这种情况下，事件委派将帮助您附加该事件。

试试这个

$(document).ready(function () {
    $(document).on('click', ".expFold a", function (e) {

        alert('working');
    });
});

Answer 3

首先，将您的绑定代码放在一个函数中：

function bidingDivClick(){
   $('.expFold').on('click', '.expFold a', function (event) {
    alert('here');      
});
}

之后，在将div附加到html中时调用此函数：

$("#myParentDiv").append('<div class="expFold"><a href="#">▼</a></div>');
bidingDivClick();

Answer 4

委派活动的另一种方式......

$(function(){
    $(this).on('click', function (e) {
        var $t = $(e.target), doc = this;
        // Testing whether the element that triggered the event was what an anchor inside a ".exFold"
        if($t.is('.expFold a')){
            alert('Anchor clicked !');
        }

    });
});

绑定点击动态创建的div不起作用

4 个答案: