Question

美好的一天。

我从数据.post

获取按钮

代码：

$(function () {

    $('.f1_start').on('click', function () {
        alert('hello');
    });

    $('.button_test').on('click', function () {
        $.post("update.php", {
                    ...
            },
            function (data) {
                    ...
                $('#div_test').html('').html(data); 
                //we get <button class="f1_start">test</button>
            });


    });

});

当我点击div中button_test的{{1}}课程的元素页面，其中ID为.post加载按钮且课程为div_test。但是第一个脚本f1_start不能用于此按钮。

请告诉我为什么脚本无法加载$('.f1_start').on('click',function(){？

Answer 1

当您声明f1开始的点击时，不存在，您必须在成功时解除它：

<script>
$(function(){



$('.button_test').on('click',function(){
$.post("update.php", {
...
},
function(data){
...
$('#div_test').html('');.html(data); //we get <button class="f1_start">test</button>
$('.f1_start').on('click',function(){
alert('hello');
});
});


});

});
</script>

Answer 2

您正在使用on但未正确委派它。 您应始终将其委托给插入动态元素时文档中存在的静态父容器

试试这个

 $('#div_test').on('click','.f1_start',function(){
   alert('hello');
  });

link详细了解委派活动

Answer 3

.on使用时只会注册一次。您可以针对您知道将始终存在的对象注册事件。

你可以给它一些额外的上下文，比如包含div，这样可以更好地工作：

$('#div_test').on('click', '.f1_start', function(){
  //.....
});

您还可以在回调中注册当前的.on事件，该事件具有相同的效果并且效率稍高，但通常通过适当的显示模块模式更好地完成这样的操作，以便仅注册您需要的事件

另外注意，没有必要清空html然后设置它，设置它将替换它。

Answer 4

尝试：

$('#div_test').on('click','.f1_start',function(){
    alert('hello');
});

Answer 5

$('#div_test').on('click','.f1_start', function(e){
  e.preventDefault();
  alert('hello');
});

<button>相当于submit，因此您必须阻止jQuery中的默认操作，否则页面将重定向，而不会向您显示警报。

Answer 6

假设.f1_start在#div_start

中

尝试：

$("#div_test").on('click',".f1_start",function(e){
  alert("AWESOME");
})

Answer 7

首先，当“脚本”加载$（'。f1_start'）时......“所选元素”不存在...

加载帖子后，您需要取消绑定并再次设置点击;）

如何使用脚本从.post加载到页面上的按钮？

7 个答案: