Question

我通过AJAX调用运行的javascript文件的问题是

例如：

index.php

$(function(){
$(".btn-ajax").click(function(){
$.getJSON('ajax.php',function(data){

jsInc(data['js'][0]['src']);

$("#response").html(data['html']);

});
});

function jsInc($src){
 var head = document.getElementsByTagName("head")[0];
            var script=document.createElement("script");
            script.type='text/javascript';
            script.src = $src;
            head.appendChild(script);
}

ajax.php

$arr['js'][] = array('src'=>'js.js');
$arr['html'] = '<input type="button" class="btn" value="show message"/>';

echo json_encode($arr);

js.js

$(function(){

$(".btn").on('click',function(){
    alert("test !");
    });

});

但是当执行ajax请求并将输入按钮附加到index.php文件时，此按钮单击事件无效！

请帮帮我

由于

Answer 1

你想通过AJAX获取脚本吗？您可以使用$.getScript：

$.getScript("script.js");

使用GET HTTP请求从服务器加载JavaScript文件，然后执行它。

Answer 2

我认为发生的事情是你第一次加载JS绑定点击监听器然后加载Button。所以听众没有受到约束

尝试颠倒顺序，如：

$("#response").html(data['html']);
jsInc(data['js'][0]['src']);

Answer 3

尝试在Ajax调用（成功）后重新绑定click函数：

$.ajax({... 
       success: function(data) {
           $(".btn").click(clickFunction);
           } 
});


$(".btn").on('click', clickFunction);

function clickFunction() {
    alert("test !");
}

Answer 4

您需要将js.js中的函数更改为委托函数。

$(function(){

$('body').on('click','.btn',function(){
    alert("test !");
    });

});

当你这样做的时候。在脚本运行之前，甚至不需要存在.btn元素。在检查.btn元素是否存在之前，它会将事件附加到body标记。

如何在使用ajax调用后运行java脚本文件并附加到输出

4 个答案: