jquery选择器中的动态ID不起作用

Question

I tried this, but ajax calling two times to PHP file or Diplaying else part two times. please help me. I called editCat() in button

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

you can avoid using
$('#edittextinput_'+id+'').keyup() as it is unnecessary to call keyup function inside another function

please call onkeyup javascript function in input button

  <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)" >

and please see my snippet to

 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(/^[AZ]*$/); 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(/^[AZ]*$/); 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>