0

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

例如 ：

索引.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 文件时，此按钮单击事件不起作用！

请帮我

谢谢

4

4 回答 4

0

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

$.getScript("script.js");

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

于 2012-11-14T14:05:50.373 回答
0

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

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


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

function clickFunction() {
    alert("test !");
}
于 2012-11-14T14:19:53.560 回答
0

我认为发生的事情是您首先加载绑定点击侦听器的 JS，然后加载按钮。所以听众不会被束缚

尝试颠倒顺序，如：

$("#response").html(data['html']);
jsInc(data['js'][0]['src']);
于 2012-11-14T14:13:30.320 回答
0

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

$(function(){

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

});

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

于 2012-11-14T14:29:59.303 回答