jQuery vermeiden mehrere Anfragen verhindern

Question

Ich brauche einen Weg, um mehrere Abgaben zu verhindern:

$("#myDiv").click(function(e) {
    e.preventDefault();
    console.log('open');

    // submit the form    
    $('#myDiv #myInput').click(function(e){
        e.preventDefault();
        /* ajax call here */
        console.log('clicked');
    });

});

Also, wenn ich klicke, wenn ich klicke #myDiv Sendet x -mal an die untergeordnete Funktion.

z.B. Wenn Sie dreimal klicken #myDiv Und dann klicken Sie #myInput Sendet dreimal das Formular und wenn Sie erneut drücken, senden Sie 6.

Irgendwelche Ideen, wie man es behebt?

Answer 1

Es scheint, als würden Sie mehrmals ein Bindungsklick -Ereignishandler verbinden $('#myDiv #myInput')..

Sie sollten entweder die verschieben $('#myDiv #myInput').click(function(e){ Außerhalb des Klick -Handlers von $("#myDiv").click(function(e) { oder verwenden .one(. Beachten Sie, dass das Verhalten in beiden Fällen unterschiedlich ist.

Verwenden Sie auch verwenden Event.StopPropagation (); Event zu stoppen, sprudeln.

Versuchen Sie es unter dem Code nach Ihren Anforderungen. Die folgenden Elemente 1. und 2. funktionieren anders. Bitte verstehen Sie den Code und implementieren Sie dies gemäß Ihren Anforderungen.

1. Verschieben #myInput Klicken Sie auf Ereignis draußen

   $("#myDiv").click(function(e) {
   e.preventDefault();
   e.stopPropagation();
   console.log('open');
   });
   
   // submit the form    
   $('#myDiv #myInput').click(function(e){
      e.preventDefault();
      e.stopPropagation();
      /* ajax call here */
      console.log('clicked');
    });
   

2. Bitte beachten Sie, dass der Klick -Handler für #MyInput einmal ausgeführt wird.

   $("#myDiv").click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      console.log('open');
   
      // submit the form    
      $('#myDiv #myInput').one(function(e){
       e.preventDefault();
       e.stopPropagation();
       /* ajax call here */
       console.log('clicked');
      });
   });