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

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


    }); 

}); 

当我从.post在DIV元素点击页面上button_test类与f1_start类ID div_test负载按钮。但第一个脚本$('.f1_start').on('click',function(){不适用于此按钮。

请告诉我为什么脚本不能在.post的负载上工作？

Answer 1

您使用on但不正确委派它。 你应该总是委托给其在插入动态元素的时间出现在文档中的静态父容器

试试这个

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

link阅读更多关于委派事件

Answer 2

正如你declear的点击f1_start，是不存在的，你必须declear它的成功：

<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 3

.on在使用时只会注册一次。您可以针对您知道永远在场的对象注册事件。

你可以给它一些额外的背景下，如包含分区所以这可能工作得更好：

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

你也可以注册你有回调内部的电流。对事件，这将具有相同的效果，效率略高一点，但通常情况下，通过适当的揭示模块模式来完成这样的事情，只需注册所需的事件即可。

也作为另一个说明，没有必要清空html然后设置它，设置它将取代它。

Answer 4

尝试：

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

Answer 5

起初，当 “脚本” 加载$（ 'f1_start'）......在 “选定的元素” 不存在...

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

Answer 6

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

<button>相当于submit所以你必须防止在jQuery的默认操作或页面会去除E重定向向你展示你的警报。

Answer 7

假设.f1_start里面#div_start

尝试：

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