Verständnis für die Ausführung von JQuery

Question

Ich habe eine Zelle <td>:

Und ich habe ein Skript in jquery, dass, wenn Sie es doppelklicken, erzeugt es ein <input type="text"> wie folgt aus:

$("td").dblclick(function(event){ 
     event.stopPropagation(); 
     if($(event.target).prop("id")!="inputeditar"){ //WHEN I DOUBLE CLICK IN THE CELL 
     // I paste the value of the cell into the value of the input 


      $(document).one("click",function(event2){ //IF I CLICK OUT OF THE INPUT 
      if($(event2.target).prop("id")!="input") 
       { 
       $("#input").remove(); //THEN I REMOVE IT 

       } 
     }); 
     } 


}); 

Wenn ich also verdoppeln Klicken Sie auf den Platz in der Zelle, dann erhält die Eingabe den Text aus der Zelle, und wenn ich außerhalb der Eingabe klicke, verschwindet sie.

Es funktioniert gut, aber wenn ich in den Eingang klicke (statt außerhalb), wird es nie verschwinden, wenn ich außerhalb davon klicke. Ich würde gerne überprüfen, ob ich draußen klicke und dann die Eingabe entferne.

Answer 1

inside Event-Handler Ereignisse ist in der Regel eine schlechte Idee, aber man kann acheive was Sie so wollen:

$(document).on("click",function(event2) { 
    if ($(event2.target).prop("id")!="input") 
    { 
     //IF I CLICK OUT OF THE INPUT 
     //THEN I REMOVE IT 
     $("#input").remove(); 
     $(document).off("click"); 
    } 
}) 

jedoch$(document).off("click") scheint wie ein wirklich schlechte Idee!

über KevinB Kommentar Nach Event-Handler zu nennen, sollten Sie in der Lage sein, einen Namespace in den Ereignishandler hinzuzufügen und deaktivieren je nach Bedarf:

$(document).on("click.removeinput",function(event2) { 
    if ($(event2.target).prop("id")!="input") 
    { 
     //IF I CLICK OUT OF THE INPUT 
     //THEN I REMOVE IT 
     $("#input").remove(); 
     $(document).off("click.removeinput"); 
    } 
}) 

(aber ich habe persönlich nie Ereignis Namespace verwendet, so sehen, wie es geht)

---

Alternativ können Sie erneut anschließen one() durch eine benannte Funktion, zB:

..."dblclick".., function() { ... 
    $(document).one("click", removeinput); 


function removeinput(e) { 
    if ($(e.target).prop("id")!="input") 
    { 
     //IF I CLICK OUT OF THE INPUT 
     //THEN I REMOVE IT 
     $("#input").remove(); 
    } 
    else 
     $(document).one("click", removeinput); 
};