jqueryセレクタの動的IDが機能しない

Question

私はこれを試しましたが、PHPファイルまたはDiplayingを2回呼び出すajaxを2回呼び出しました。私を助けてください。私は

EDITのHTML

<button class="btn btn-primary btn-xs" onclick="editCat(<?php echo $row['id']; ?>)"> 
    <span class="glyphicon glyphicon-edit"></span> 
</button> 
<div id="edittextdiv_<?php echo $row['id']; ?>"> 
    <input type="text" name="" placeholder="Enter categorie name" id="edittextinput_<?php echo $row['id'];?>" value="<?php echo $row['name']; ?>"> 
</div> 

JSが

function editCat(id) { 
    $('#edittextdiv_'+id+'').toggle(); 
    $('#edittextinput_'+id+'').keyup(function(event){ 
     var category = $(this).val(); 
     var firstletter = category.charAt(0); 
     var capitalreg = new RegExp(/^[A-Z]*$/); 
     if(capitalreg.test(firstletter) && category != ''){ 
      if(event.keyCode == 13){ 
       $.ajax({ 
        url:"edit_cat.php", 
        type:"post", 
        dataType:"json", 
        data:{category:category, item_id:id}, 
        success:function(response) { 
         if (response.success == true) { 

         } 
        } 
       }); 
      } 
     } else { 
      $('#edittextinput_'+id+'').after("<p class='text-danger'>Enter first letter in capital</p>"); 
     } 
    }); 
} 

Answer 1

あなたはそれが不要であるとして、別の内部の機能をkeyUpイベント呼び出すこと
$('#edittextinput_'+id+'').keyup() の使用を避けることができ、ボタンでeditCatを（）と呼ばれます機能

*解析された* HTMLを提供

onkeyupは、入力ボタン

<input type="text" name="" placeholder="Enter categorie name" id="edittextinput_<?php echo $row['id'];?>" value="<?php echo $row['name']; ?>" onkeyup="editCat('<?php echo $row['id'];?>',this)" > 

でjavascript関数を呼び出してくださいと

function check_key(id,cc,event) { 
 

 
     /*$('#edittextdiv_'+id).toggle(); toggle */ 
 
     var x = event.which || event.keyCode; 
 
     var jq = $(cc); 
 
     var category =jq.val(); 
 
     var firstletter = category.charAt(0); 
 
     var capitalreg = new RegExp(/^[A-Z]*$/); 
 
     if(capitalreg.test(firstletter) && category != ''){ 
 
      
 
      if(event.keyCode == 13){ 
 
      alert('ajax code'); 
 
       $.ajax({ 
 
        url:"edit_cat.php", 
 
        type:"post", 
 
        dataType:"json", 
 
        data:{category:category, item_id:id}, 
 
        success:function(response) { 
 
          
 
         if (response.success == true) { 
 

 
         } 
 
        } 
 
       }); 
 
      } 
 
     }else { 
 
      /*alert('else code')*/ 
 
      $('#edittextinput_'+id).after("<p class='text-danger'>Enter first letter in capital</p>"); 
 
     } 
 
} 
 
function editCat(id) { 
 

 
    $('#edittextdiv_'+id+'').toggle(); 
 
    
 
     var category = $('#edittextinput_'+id+'').val(); 
 
     var firstletter = category.charAt(0); 
 
     var capitalreg = new RegExp(/^[A-Z]*$/); 
 
     if(capitalreg.test(firstletter) && category != ''){ 
 
       $.ajax({ 
 
        url:"edit_cat.php", 
 
        type:"post", 
 
        dataType:"json", 
 
        data:{category:category, item_id:id}, 
 
        success:function(response) { 
 
         if (response.success == true) { 
 

 
         } 
 
        } 
 
       }); 
 
     } else { 
 
      $('#edittextinput_'+id+'').after("<p class='text-danger'>Enter first letter in capital</p>"); 
 
     } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="edittextdiv_1"> 
 
    <input type="text" name="1" placeholder="Enter categorie name" id="edittextinput_1" onkeyup="check_key('1',this,event)" value="test"> 
 
</div><br> 
 
<button class="btn btn-primary btn-xs" onclick="editCat(1)"> 
 
    test 
 
</button>