Question

我有一个像这样的ajax形式......

<form action="/whatever" method="POST" id="blerg">
</form>

这个ajax事件在提交表单时就像这样绑定到它：

$("#blerg").bind('ajax:before', function(xhr, settings){
    alert("xxx");
}).bind('ajax:success', function(xhr, data, status){
    alert("xxx");
});

现在，如果我在表单中放置一个链接：

<form action="/whatever" method="POST" id="blerg">
    <a id="some_ajax_link" href="#">Some ajax link</a>
</form>

然后将ajax事件附加到该链接：

$("#some_ajax_link").bind('ajax:before', function(xhr, settings){
    alert("yyy");
}).bind('ajax:success', function(xhr, data, status){
    alert("yyy");
});

当我点击表单内的链接时。它既可以触发形式的ajax事件，也可以触发链接事件。

我如何制作链接只是触发它自己的事件而不是它包含的表单事件？

感谢。

Answer 1

你需要在表单和链接中使用.bind（）吗？如果您在点击链接时仅使用一个电话？

http://jsfiddle.net/bruno2c/nS5KS/2/

$('#some_ajax_link').click(function(){
    $.ajax({
        type: "POST",
        /* insert a valid url here */
        url: "",
        data: { name: "John", location: "Boston" },
        beforeSend: function (xhr) {
            alert('yyy');
        },
        success: function (xhr) {
            alert('xxx');
        }
    });
});

Answer 2

尝试更换

$("#new_edit_text_style_form")

与

$("#blerg")

Answer 3

这只是一种解决方法，但也许它可以帮助您避免此问题。它仍会触发两次，但代码（alert("xxx");）只在右元素触发事件时运行。

这是一个最小的例子：

HTML：

<div id="header"> 
    <div id="content">
    </div>  
</div>

CSS：

#header {
    background-color: blue ;
    width: 100px ;
    height: 100px ;
}

#content {
    background-color: red ;
    width: 50px ;
    height: 50px ;
}

JavaScript的：

$("#header").bind('click', function(xhr, settings){
    if(xhr.originalEvent.srcElement == $(this)[0]) { // $(this) is the same as $("#header") in this case
        alert("xxx"); // this is only executed when clicked on the header
    }
}) ;

Answer 4

不确定这是否适用，但这不是

的工作

event.preventDefault()

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.preventDefault demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>

<script>
$( "a" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );
});
</script>

Src：JQuery Site

Answer 5

你的问题似乎有点令人困惑。

如果您想阻止您可以使用的超链接：

$( "#some_ajax_link" ).click(function( event ) {
  event.preventDefault();
  //yourcode
});

如果你想阻止表单提交，但运行一些javascript：

<form onsubmit="alert('stop submit'); return false;" >

或将其链接到任何javascript函数，如：

HTML

<form onsubmit="return mySubmitFunction()">
</form>

的Javascript

function mySubmitFunction(event) 
{ 
  event.preventDefault(); 
  try { 
     //add code here
  } catch {}; 
  return false; 
}

Answer 6

我遇到了同样的问题。我没有进行过广泛的测试，但我想出的最直接的答案是测试 event.target == event.currentTarget （与efux示例类似）

event.target 应该返回触发事件的对象（您点击的链接） event.currentTarget 应该返回事件侦听器附加到的对象（链接所在的表单）。与他在答案中使用的[0] efux相同。

所以使用你的例子：

$("#blerg").on('ajax:before', function(event){
  if (event.target = event.currentTarget) {
    alert("xxx");
  }
}).on('ajax:success', function(event){
  if (event.target = event.currentTarget) {
    alert("xxx");
  }
});

$("#some_ajax_link").on('ajax:before', function(event){
  if (event.target = event.currentTarget) {
    alert("yyy");
  }
}).on('ajax:success', function(event){
  if (event.target = event.currentTarget) {
    alert("yyy");
  }
});

当你单击表单内部和链接时，如何阻止表单的ajax事件触发？

6 个答案: