Question

我使用ajax调用PHP来替换HTML文件中的两行。原始行仍然具有预期的jquery单击功能，但点击功能不会出现在我的php文件回显的新两行上（我确保类名完全相同）。

我在Chrome检查元素功能上查看事件监听器，是的，新行中缺少.click函数。

以下是我的代码：

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="replacable">
    <p class="editable" id="line1">Edit line 1</p>  
    <p class="editable" id="line2">Edit line 2</p>
</div>
<h4 id="click_to_replace">Click to replace line 1 and 2</h4>

<script>
    $('.editable').click(function(){
        alert('ID =  ' + $(this).attr('id'));
    });
    $('#click_to_replace').click(function(){
        $.ajax({
            type: 'POST',
            url: "replace.php",
            data: {id: $(this).attr('id')},
            success: function(newp){
                $('#replacable').replaceWith(newp);
            }
        });
    });             
</script>

php文件：

<?php
 echo '<div id="replacable">
       <p class="editable" id="line3">Edit line 3 NEW</p>   
       <p class="editable" id="line4">Edit line 4 NEW</p></div>'
?>

Answer 1

您的click处理程序仅附加到代码挂钩处理程序运行时存在的元素。

您可以使用事件委派来解决这种情况：

$(document.body).on('click', '.editable', function(){
    alert('ID =  ' + this.id); // $(this).attr('id')); - No need for attr here
});

在click上挂钩document.body，但只有在点击通过.editable时触发处理程序。如果是这样，jQuery会触发处理程序，就好像它直接附加到元素一样。这样，你不关心元素是否是以后创建的。

您不必使用document.body;只使用一个你不会替换的祖先元素。

Answer 2

您可以使用.on()向创建的元素添加点击处理程序。见下面的代码

$(document).on('click','.editable',function(){
        alert('ID =  ' + $(this).attr('id'));
    });

上面的代码会将click事件附加到指定的选择器。有关.on()

的详情，请参阅this

Answer 3

您需要将.on()用于动态创建的元素。

  $('body').on('click', '#click_to_replace', function(){

Answer 4

从 JQuery 1.7 起，您应该使用.on

$(document.body).on('click', '.editable', function(){
    alert('ID =  ' + this.id);
});

如果您在 1.7 之前使用 jQuery ，请尝试使用live

$(".editable").live('click', function(){
    alert('ID =  ' + this.id);
});

注意： .live已弃用。

Answer 5

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="replacable">
    <p class="editable" id="line1">Edit line 1</p>  
    <p class="editable" id="line2">Edit line 2</p>
</div>
<h4 id="click_to_replace">Click to replace line 1 and 2</h4>

<script>

    $('#click_to_replace').click(function(){
        $.ajax({
            type: 'POST',
            url: "replace.php",
            data: {id: $(this).attr('id')},
            success: function(newp){
                $('#replacable').replaceWith(newp);
            }
        });
    $('.editable').click(function(){
        alert('ID =  ' + $(this).attr('id'));
    });
    });             
</script>

**Now try this one Hope This will work because your are adding some tags live so those are not present at the time of DOM loading they are formed after the ajax call**

Answer 6

你已经有了很好的答案但是如果你想要更多的信息看到这个类似的帖子，我最近遇到了同样的问题，它让我明白为什么它无法工作。

Event binding on dynamically created elements

问候

点击功能不会在PHP创建的元素上运行？

6 个答案: