All geek questions in one place

How to stop the ajax event of a form when a button is clicked, and click the link inside the form?

I have an ajax form, for example ...

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

This is an ajax event bound to it like this when the form is submitted:

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

Now, if I put the link in the form as follows:

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

And then attach the ajax events to this link like this:

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

When I click the link inside the form. It triggers both ajax event forms and link events.

How can I make a link just start its own events, and not the forms in which it entered?

Thanks.

+4
source share
6 answers

.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');
        }
    });
});
+1

$("#new_edit_text_style_form")


$("#blerg")
0

, , , . - , (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
    }
}) ;
0

, ,

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

0

.

, :

$( "#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; 
}
0

. , , , , , 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");
  }
});
0

Source: https://habr.com/ru/post/1523572/

More articles:


All Articles