Ich kann nicht bearbeiten und einreichen Form von jquery

Question

Ich habe diesen Code:

jQuery(function ($) { 
 
    $('.over').mouseover(function(){ 
 
     $(this).html($('<form/>', { 
 
      action: 'edit.php', 
 
      method: 'POST' 
 
     }).append($('<input/>', { 
 
      type: 'text', 
 
      name: 'name', 
 
      value: $(this).text() 
 
     }))); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text over" id="1">TEXT</div>

Also, wenn die Maus über ist, die Eingabe erscheint, aber leer und ich kann nicht bearbeiten, um die Form senden . Was ist los?

Answer 1

wenn Sie Registerkarte an den Eingang bearbeiten Wenn Sie $(this).text() es ist schon zu spät verwenden. Das Element HTML hat sich bereits geändert.

Verwenden Sie die append: statt .append( um die $(this).text() bei formErstellungszeit greifen! Wichtige: BTW Beachten Sie auch die Verwendung von .one() und mouseenter (statt Mouseover)

$('.over').one("mouseenter", function(){ 
 

 
    $(this).html(
 
    $('<form/>', { 
 
     action: 'edit.php', 
 
     method: 'POST', 
 
     append: $('<input/>', { 
 
     type: 'text', 
 
     name: 'name', 
 
     value: $(this).text() 
 
     }) 
 
    }) 
 
); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text over" id="1">TEXT</div>

...

Answer 2

1. Sie verwenden .html(), die alle Inhalte ersetzt, so durch die Zeit, die Sie value: $(this).text() nennen, ist es bereits mit einer Form ersetzt.

2. Sie können es scheinbar nicht bearbeiten, weil jedes Mal, wenn Sie mit der Maus darauf klicken, das Ereignis erneut auslöst. Sie können es