Question

我已经制作了下面的演示来简化我的大问题，当输入＆＃34;首先输入＆＃34;，点击提交，点击返回＆＃34;首先输入＆＃34;，它提醒一次。但是，刷新时，输入＆＃34;首先输入＆＃34;，提交，然后输入＆＃34;第二个输入＆＃34;，提交，点击＆＃34;首先输入＆＃34;，浏览器提醒TWICE打算运行一旦。问题是什么？如何解决这个问题？

Html文件（index.php）

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<input id="inputtext" type="text">
<button id="submit">Submit</button>
<div id="returned_result"></div>


<script>
$("#submit").click(function(){

    var content=$("#inputtext").val(); //get the value of input field

    $.post("testclick2.php", {content:content}, function(result){
    $("#returned_result").prepend(result);
     });

    $("#inputtext").val(""); //clear the input area

})

</script>

testclick2.php

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<?php
$content=$_POST["content"];
echo "<div class=\"content\">".$content."</div>"."<br>";
?>

<script>
$(".content").click(function(){
    alert("clicked");
})
</script>

Answer 1

在添加之前尝试删除您的侦听器：

$("#submit").off('click');
$("#submit").click(function(){...}

和

$(".content").off('click');
$(".content").click(function(){...}

Answer 2

您收到两个提醒，因为您使用click响应返回.post处理程序的两倍。

基本上每增加一次提交，您都会收到额外提醒。

从click响应中删除POST处理程序，并将事件附加到body，以便它可以处理动态添加的元素。

将其添加到您的主<script>部分：

$('body').on('click', '.content', function() {
    alert("i've been clicked once");
});

并且您的php文件只会是这样：

<?php
    $content=$_POST["content"];
    echo '<div class="content">' . $content . '</div>' . '<br>';
?>

无需加载jquery或输出任何javascript

Javascript运行两次而不是一次

2 个答案: