Question

我基本上正在开发一个动态生成表行以在已定义页面上显示内容的插件，在生成时我希望它在每个激活 Ajax <的行上显示按钮 / strong>请求点击时，我尝试添加 ID 并执行jQuery onClick执行此操作，但它没有显示我的测试alert()

以下是我正在使用的 jQuery 代码：

jQuery(document).ready(function(){ jQuery("#submit").click(function(event) { //Stop the form processing event.preventDefault(); //Get the username value var Username = jQuery('#username').val(); jQuery.ajax({ type: "GET", crossDomain: true, url: apiURL + "video/" + Username + "/views/", success: function(data) { Parsed = jQuery.parseJSON(data); jQuery.each(Parsed.user_media, function(i,v){ jQuery("#results").append("<tr><td><button type='submit' id='addtoPlaylist'>Add to Playlist</button></td></tr>"); }); }, }); }); jQuery("#addtoPlaylist").click(function(event) { alert('Working!'); }); });

所有内容都非常完美，例如 Ajax 调用并返回表格行，就在我尝试使用基于.click()的{{1}}时只是似乎没有激活也没有把任何错误扔进控制台。

Answer 1

之所以发生这种情况，是因为您在文档准备就绪时添加了链接侦听。此时你的ajax调用还没有被触发，并且页面中不存在该元素。您必须创建一个单独的函数并在ajax return语句中调用它。请注意，不同的按钮必须具有不同的ID。

解决方案应该像

一样

jQuery(document).ready(function(){

jQuery("#submit").click(function(event) {

        //Stop the form processing
    event.preventDefault();

    var addtoPlaylist = function(){
         alert('Working!');
    }



        //Get the username value
    var Username = jQuery('#username').val();

    jQuery.ajax({
        type: "GET",
        crossDomain: true,
        url: apiURL + "video/" + Username + "/views/",
        success: function(data) {
            Parsed = jQuery.parseJSON(data);
            jQuery.each(Parsed.user_media, function(i,v){
                jQuery("#results").append("<tr><td><button type='submit' id='addtoPlaylist'>Add to Playlist</button></td></tr>");
                 jQuery("#addtoPlaylist").click(function(event) {
                          addtoPlaylist();
                  });
            });
        },
    });

});

}）;

Answer 2

试试这个

jQuery("#results").on("click", "#addtoPlaylist", function(event) {
    alert('Working!');
});

Answer 3

对生成的元素使用jQuery event delegation：

$("#results").on('click','#addtoPlaylist',function(){
   alert('clicked');
});

Answer 4

尝试

$("#addtoPlaylist").on('click',function(event) {
        alert('Working!');
    });

Answer 5

我更喜欢在未来的元素上使用jQuery.delegate。

jQuery("body").delegate("#addtoPlaylist","click",function () {
    alert("delegate works fine!");
})

Answer 6

我建议不要使用委托的事件处理程序，而是使用jQuery以正确的方式创建元素：

jQuery(document).ready(function($){
    $("#submit").closest('form').on('submit', function(event) {
        event.preventDefault();
        var Username = $('#username').val();

        $.ajax({
            type: "GET",
            crossDomain: true,
            url: apiURL + "video/" + Username + "/views/"
        }).done(function(data) {
            var Parsed = $.parseJSON(data);

            $.each(Parsed.user_media, function(i,v){
                var tr  = $('<tr />'),
                    td  = $('<td />'),
                    btn = $('<button />', {type:'submit',
                                           id  :'addtoPlaylist',
                                           text:'Add to Playlis',
                                           on:{
                                               click: function() {
                                                   alert('Working');
                                               }
                                           }
                           });

                $("#results").append( tr.append(tr.append(button)) );
            });
        });
    });
});

并注意您要附加多个具有相同ID的元素。

.click（）无法在WordPress插件中运行

6 个答案: