javascript - Jquery 事件委托问题

Question

谁能建议我在这里出错的地方？news_active是一个静态 div，其他所有内容都是通过 ajax 调用加载的，警报没有触发任何内容，非常难过？！

$('#news_active').load('ajax.php', function() {
    // Delete news active
    $('#news_delete').on('click', function() {
        var vNid = $('#news_delete').attr('data-nid').val();
        alert(vNid);
        //$('#news_active').load('ajax.php?nid='+vNid);
    });
});

按钮看起来像这样，有多个按钮加载了不同的 data-nid 值：

<button id="news_delete" data-nid="1">Delete</button>

Answer 1

您应该改用data()方法：

var vNid = $('#news_delete').data('nid');

或者只是attr('data-nid')没有val().

val()正试图获得Element.value财产，而你没有它在button.

Answer 2

由于news_delete是动态加载的，因此您需要使用event delegation来注册事件处理程序，例如：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#news_active').on('click', '#news_delete', function(event) {
    var vNid = $('#news_delete').data('nid');
    alert(vNid); 
});

此外，data-nid在代码中获取属性值的方式也不正确。

要么使用这个：

var vNid = $('#news_delete').attr('data-nid');  // No need of .val() here
alert(vNid);

或者只是这个使用.data()

var vNid = $('#news_delete').data('nid');  
alert(vNid);

Answer 3

var vNid = $('#news_delete').attr('data-nid').val(); //remove the value it 
                                              // will return the value of button

将其更改为

var vNid = $('#news_delete').attr('data-nid');