Question

伙计我有以下简单形式：

<form action="?edit-form" method="post" enctype="multipart/form-data" class="edit">
    <img src="test.jpg" alt="">
    <input type="submit" name="delete-image" value="Delete Image"><br>
    <input type="submit" name="Go" value="Go">
</form>

这个jQuery：

$(document).on('submit', '.edit', function(e) {
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function(html) { }
    });
    $("img").attr("src", "deleted.jpg");
    e.preventDefault();
});

jQuery工作得很好，除了我希望它只在按下“删除图像”按钮时工作，而不是在按下“Go”时工作。我该怎么做呢？现在，AJAX触发提交，我希望它在点击“删除图像”时触发。

Answer 1

当event.target与您的要求不匹配时，尝试离开事件处理程序，

$(document).on('submit', '.edit', function(e) {
  if($(e.target).is('input[type=submit][name=Go]')) { return false; }
  //rest of your code

Answer 2

将删除图片按钮更改为类型=＆＃34;按钮＆＃34;而不是类型=＆＃34;提交＆＃34;并给它一个类或id：

<input type="button" name="delete-image" class="deleteImage" value="Delete Image">

下一步是捕获点击事件，如下所示：

 $(document).on('click', '.deleteImage', function(e) {
        //you want to start with blocking the default behavior:
        e.preventDefault();         

        $("img").attr("src", "deleted.jpg");
}

我认为你不需要这里的ajax请求，因为你只是在操纵DOM，但这可能会因你的实际需求而有所不同。

在特定按钮上触发jQuery AJAX单击

2 个答案: