Ajax：对结果做一些事情

Question

我用jQueryAjax。我将 id 发送到另一个页面，在那里我创建了一个 MySql 数据库的 select：id 我 select 一个列，然后我回显一行。这很好用。但是第二个功能不起作用，问题是：如何单击来自其他页面（proces.php）和 ajax 的带有 class 书签的 div ？

index.php:

<div id="button">button</div>
<div id="solution"></div>

index.php（在 ajax 调用之后）：

<div id="button">button</div>
<div id="solution">
    <div class="bookmark"> 13.13 </div>
</div>

jQuery-Ajax:

$("#button").click(function(){
    $.post("proces.php", 
    { id: 299 }
    ,function (result) { $("#solution").html(result); }
    ); 
});

function second(){   
    $(".bookmark").click(function(){
        alert('it works!');
    });
}

proces.php:

$id = $_REQUEST['id'];
$result = mysqli_query($con, "SELECT * FROM bookmarks
                              WHERE id = '$id' ");

while ($row = mysqli_fetch_array($result)) {
    $minut = $row["minut"];     
?>
<div class="bookmark"> <?php echo $minut; ?> </div>
<?php 
}
?>

Answer 1

您需要一个积极的倾听者，而不是 javascript 函数 second。这里有 2 个问题：

您有一个 javascript 函数，它永远不会在点击时被调用
由于元素是动态呈现的，.click() 不会工作，因为 DOM 不会将活动侦听器附加到动态生成的 html元素.

所以，改变

function second(){   
    $(".bookmark").click(function(){
        alert('it works!');
    });
}

到

$(function(){
    $(document).on("click", ".bookmark", function(){
        alert('it works! - ' + $(this).text());
    });
});

这称为 event delegation，您将侦听器附加到父节点（在本例中为 document），并在其后代节点（.bookmark）上触发侦听器，这否则不适用于文档中动态呈现的 html 元素。

Answer 2

您需要在 $.post 的成功回调中调用 second()。

$.post("proces.php", { id: 299 } ,function (result) { 
    $("#solution").html(result); 
    second();
});

但是请注意，如果具有相同 class 的其他元素已经存在，那么这些元素的处理程序将再次绑定。

对于简单的事件处理程序，现在更常见的方法是使用事件委托。然而，对于更复杂的情况，如初始化插件，这就是您需要处理它们的方式

Ajax：对结果做一些事情

Ajax: do something with the result

jquery

ajax