Fatal编程技术网
  • jquery/
  • Jquery .click（）在WordPress插件中不工作

Jquery .click（）在WordPress插件中不工作

jquery wordpress

Jquery .click（）在WordPress插件中不工作,jquery,wordpress,Jquery,Wordpress,我基本上是在开发一个插件，动态生成表行以在定义的页面上显示内容，在生成时，我希望它在每一行上显示一个按钮，当单击时激活一个Ajax请求，我尝试附加一个ID并执行jQuery onClick来执行此操作，但是它没有显示我的测试alert（） 下面是我使用的jQuery代码： jQuery(document).ready(function(){ jQuery("#submit").click(function(event) { //Stop the form pr

我基本上是在开发一个插件，动态生成表行以在定义的页面上显示内容，在生成时，我希望它在每一行上显示一个按钮，当单击时激活一个Ajax请求，我尝试附加一个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!');
    });
});

jQuery（文档）.ready（函数（）{
jQuery（“提交”）。单击（函数（事件）{
//停止表单处理
event.preventDefault（）；
//获取用户名值
var Username=jQuery（'#Username'）.val（）；
jQuery.ajax({
键入：“获取”，
跨域：是的，
url:apiURL+“视频/”+用户名+“/视图/”，
成功：功能（数据）{
Parsed=jQuery.parseJSON（数据）；
jQuery.each（已解析的用户\媒体，函数（i，v）{
jQuery（“结果”）.append（“添加到播放列表”）；
});
},
});
});
jQuery（“#addtoPlaylist”）。单击（函数（事件）{
警惕（‘工作’）；
});
});
一切都工作得很好，比如Ajax调用并返回表行，这只是在我尝试使用
时。基于
单击（）
，它似乎不会激活控制台，也不会向控制台抛出任何错误。

使用jQuery生成元素：

$("#results").on('click','#addtoPlaylist',function(){
   alert('clicked');
});
对生成的元素使用jQuery：

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

试一试

试试这个

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

jQuery("#results").on("click", "#addtoPlaylist", function(event) {
    alert('Working!');
});
发生这种情况是因为您正在添加链接“在文档准备就绪时侦听”。此时您很抱歉，ajax调用尚未启动，并且该元素在页面中不存在。 您必须创建一个单独的函数，并在ajax返回语句中调用它。 请注意，不同的按钮必须具有不同的ID

soluiton应该是这样的

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();
                  });
            });
        },
    });

});

jQuery（文档）.ready（函数（）{
jQuery（“提交”）。单击（函数（事件）{
//停止表单处理
event.preventDefault（）；
var addtoPlaylist=函数（）{
警惕（‘工作’）；
}
//获取用户名值
var Username=jQuery（'#Username'）.val（）；
jQuery.ajax({
键入：“获取”，
跨域：是的，
url:apiURL+“视频/”+用户名+“/视图/”，
成功：功能（数据）{
Parsed=jQuery.parseJSON（数据）；
jQuery.each（已解析的用户\媒体，函数（i，v）{
jQuery（“结果”）.append（“添加到播放列表”）；
jQuery（“#addtoPlaylist”）。单击（函数（事件）{
addtoPlaylist（）；
});
});
},
});
});
}))

之所以发生这种情况，是因为您在文档就绪时添加了链接侦听。此时您很抱歉，ajax调用尚未启动，并且该元素在页面中不存在。 您必须创建一个单独的函数，并在ajax返回语句中调用它。 请注意，不同的按钮必须具有不同的ID

soluiton应该是这样的

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();
                  });
            });
        },
    });

});

jQuery（文档）.ready（函数（）{
jQuery（“提交”）。单击（函数（事件）{
//停止表单处理
event.preventDefault（）；
var addtoPlaylist=函数（）{
警惕（‘工作’）；
}
//获取用户名值
var Username=jQuery（'#Username'）.val（）；
jQuery.ajax({
键入：“获取”，
跨域：是的，
url:apiURL+“视频/”+用户名+“/视图/”，
成功：功能（数据）{
Parsed=jQuery.parseJSON（数据）；
jQuery.each（已解析的用户\媒体，函数（i，v）{
jQuery（“结果”）.append（“添加到播放列表”）；
jQuery（“#addtoPlaylist”）。单击（函数（事件）{
addtoPlaylist（）；
});
});
},
});
});
}))

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

jQuery("body").delegate("#addtoPlaylist","click",function () {
    alert("delegate works fine!");
})
我更喜欢在将来的元素上使用jQuery.delegate

jQuery("body").delegate("#addtoPlaylist","click",function () {
    alert("delegate works fine!");
})
我建议不要使用委托事件处理程序，而是使用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)) );
            });
        });
    });
});

jQuery（文档）.ready（函数（$）{
$（“#提交”）。最近（'form'）。在（'submit'，函数（事件）{
event.preventDefault（）；
var Username=$（'#Username'）.val（）；
$.ajax({
键入：“获取”，
跨域：是的，
url:apiURL+“视频/”+用户名+“/views/”
}).完成（功能（数据）{
var Parsed=$.parseJSON（数据）；
$.each（已解析的用户\媒体、函数（i、v）{
var tr=$（''），
td=$（''），
btn=$（''，{类型：'submit'，
id:'addtoPlaylist'，
文本：“添加到Playlis”，
关于：{
单击：函数（）{
警报（“工作”）；
}
}
});
$（“#结果”）.append（tr.append（tr.append（button））；
});
});
});
});
请注意，您正在附加具有相同ID的多个元素。

我建议不要使用委托事件处理程序，而是使用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)) );
            });
        });
    });
});

jQuery（文档）.ready（函数（$）{
$（“#提交”）。最近（'form'）。在（'submit'，函数（事件）{
event.preventDefault（）；
var Username=$（'#Username'）.val（）；
$.ajax({
键入：“获取”，
跨域：是的，
url:apiURL+“视频/”+用户名+“/views/”
}).完成（功能（数据）{
var Parsed=$.parseJSON（数据）；
$.each（已解析的用户\媒体、函数（i、v）{
var tr=$（''），
td=$（''），