为什么我的 jQuery Ajax json 数组数据会重复？

Question

不知道为什么会发生这种情况，也许我将代码放在另一个里面 - 或者可能是完全不同的问题。在这种情况下寻找专业知识。我正在尝试一个基本示例，其中选择数据是从数据库中填充的：

      <div class="col-md-4 mb-3">
        <label for="producer">Select Producers</label>
        <?php if ($data): ?>
        <select class="custom-select d-block w-100" name="producer[]" id="producer" required="" size="5" multiple>
            <?php foreach($data as $row): ?>
                <option value=<?php echo $row['Id'] ?> ><?= $row['producer_name'] ?></option>
            <?php endforeach ?>
        </select>
        <?php else: ?>
            No data found
        <?php endif ?>
        <button class="btn btn-danger btn-sm" type="submit" id="del_producer">Delete</button>
        <div id="asd"></div>
      </div>

有一个按钮可以通过 ajax 将多个选定的数据发送到另一个 php 页面。这是代码。

$('#producer').on('click', function(event){
var prodId=' ';
prodId = $(this).val();
var jsonString = JSON.stringify(prodId);
document.getElementById("asd").innerHTML = jsonString;
if (prodId!=""){
  $("#del_producer").click(function(){
    $("#del_producer").attr("disabled", "disabled");
    $.ajax({
            url: "delete.php",
            type: "POST",
            data: {data : jsonString},
            cache: false,
            success: function(result){
                $("#del_producer").removeAttr("disabled");
                prodId = '';
                alert(result);
                console.log(result);
            }
        });
  });
}
    else{
        alert('Please select producer to delete!');
    }
});

#asd 只是在发送前检查选择的值是否正确。是的，这是正确的。现在我的 php 文件如下所示：

    $data = json_decode(stripslashes($_POST['data']));
    $array = implode(',', $data);
    echo $array;

是的，只需三行即可返回我发送的内容。 现在问题来了：我正在发送 3 个 id 值 [2,3,5] 它也在 #asd 中显示。现在，当我单击按钮时 - 我收到的响应是 [2] 、 [2,3] 、 [2,3,5] - 三个响应。这应该是我缺少的东西。有人可以指出它。我发送时需要它为 [2,3,5]。

Answer 1

从你的 jQuery 代码来看，我猜是这段代码：

$("#del_producer").click(function(){

...可能会在del_producer 上堆积多个点击侦听器。您需要使您添加的最新侦听器函数是唯一的点击侦听器。

$('#producer').on('click', function(event){ 可能也是如此，但我必须查看更多代码上下文才能知道那里是否也可能存在相同的问题。要记住的重要一点是，无论何时您执行 .on('some-event', my_function... than 都不会替换该事件类型的任何现有侦听器函数，它只是添加新的。