Wordpress插件jQuery脚本调用admin-ajax.php只工作一次

Question

我在写一个小的wordpress插件。这个插件有一个简单的脚本，可以在后端与一个数据表交互。

通过单击按钮复制表中的一行，然后将数据插入数据库。我使用的是setTimeout(function () {}，因为表通过ajax加载，我需要等待按钮在DOM中。

它的工作原理，但只有在第一次点击，什么都没有发生，如果我点击按钮第二次，我必须刷新页面，使其再次工作。

下面是我的代码:

setTimeout(function () {
var duplicate = $('#wpbody-content').find("[data-action=duplicate]");
duplicate.each(function() {
$(this).on('click', function() {
//console.log('click');
var rate = $(this).parent().parent().next().find('.custom-control-input').val();
//console.log(value);
$.ajax({
url: '/wp-admin/admin-ajax.php',
data: {
action: 'duplicate_row',
'duplicate_ajax': rate
}, success: function(data){
//console.log('SUCCESS');
$('#my-table').DataTable().ajax.reload(null, false);
}
});
});
});
}, 3000);

Answer 1

我会把它包装在一个函数中，这样就可以按需调用了。

最好为每个元素duplicate添加一个类，然后这样调用它。

另外，最好是通过PHP在页面上定义ajax url，这样当你调用wordpress ajax时就会有一致性。

wp_localize_script( 'YOUR_ENQUEUED_SCRIPT', 'site', array('ajaxurl' => admin_url( 'admin-ajax.php' )) );

然后在你的js中:

function addRow(rate){
$.ajax({
url: site.ajaxurl,
data: {
action: 'duplicate_row',
'duplicate_ajax': rate
}, success: function(data){
//console.log('SUCCESS');
$('#my-table').DataTable().ajax.reload(null, false);
}
});
}

$('#wpbody-content').on("click", ".duplicate", function(e){
e.preventDefault();
let rate = $(this).parent().parent().next().find('.custom-control-input').val();
addRow(rate);
});