Question

所以我将这2个jQuery函数存储在.js文件中，并且.js文件在head标记之前加载

.js文件中的内容：

$(document).ready(function(){

    $("#button1").click(function(){
        $.ajax({
            type: 'GET',
            url: 'button2.php',
            success: 
                function(html){
                    $('#button_div').html(html)
                }
            ,
        });     
    });

    $("#button2").click(function(){
        $.ajax({
            type: 'GET',
            url: 'button1.php',
            success: 
                function(html){
                    $('#button_div').html(html)
                }
            ,
        });     
    });

});

所以在我身体之后：

<div id="button_div"><input type="button" id="button1" value="Press"></div>

当按下button1时，将使用div和button2代码加载名为button2.php的php文件，但是当按下button2时将不会执行button2单击功能。

为什么？

如果我将button2的jQuery代码放在button2.php文件中，之后元素就能正常工作。但我不希望这样。我想保持jQuery行仅保存在.js文件中，并且仅在</head>标记之前保存。我不想在元素之后使用jQuery行。

Answer 1

当您致电$("#button2").click()时，#button2尚不存在，因此您无需拨打电话。为了使click事件有效，您需要使用事件委托（即绑定到存在的元素），如下所示：

$(document).on('click', '#button2', function () {

然后，任何时候#button2被添加，单击它将触发该事件回调。

（我以document为例，但尝试使用距离#button2更近的祖先。

Answer 2

它不起作用，因为当您第一次调用它时，您的选择器不会返回元素。 $('#button2')只被调用一次，不会监视DOM的变化。

请改用事件委托语法：

$('#parent').on('click', '#button2', function() {
    ...
});

此外，您的AJAX请求可以简化一点：

$("#button1").click(function() {
    $('#button_div').load('button2.php');
});

Answer 3

你可以发布button1.php和button2.php的内容我假设

button1.php =

<input type="button" id="button2" value="Press">

button2.php =

<input type="button" id="button1" value="Press">

Answer 4

在你的内部按钮1点击功能：

$("#button1").click(function(){
    $.ajax({
        type: 'GET',
        url: 'button2.php',
        success: 
            function(html){
                $("#button_div").html(html) // You forgot pass the selector as a string
            }
        ,
    });     
});

这可能会解决您的问题。此外，如果在创建元素之前调用jQuery（请记住它是自上而下），它将无法工作。

Answer 5

这是因为创建单击处理程序时页面上不存在#button2。您需要使用on()支持委派事件来执行您要执行的操作。

$(document).on('click', '#button2', function() {
    $.ajax({
        type: 'GET',
        url: 'button1.php',
        success: 
            function(html){
                $('#button_div').html(html)
            }
    });     
});

理想情况下，您可以在创建包含#button2的{{1}}之前获取页面上存在的元素，您可以将事件处理程序附加到#button2而不是document。

在ajax html加载后调用jQuery函数

5 个答案: