Question

我使用jQuery Ajax。我将id发送到另一个页面，在那里我选择一个MySql数据库：使用id我选择一个colum并且我回显一行。这很好用。但是第二个函数不起作用，问题是：如何使用带有ajax的其他页面（proces.php）的类书签单击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

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

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

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

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

Ajax：对结果做点什么

2 个答案: