为什么我的 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上堆积多个点击侦听del_producer 。 您需要使您添加的最新侦听器函数成为唯一的点击侦听器。

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