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

Question

我试过了，但是 ajax 调用了两次 PHP 文件或 Diplaying else 部分两次。请帮我。我在按钮中调用了 editCat()

编辑 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

你可以避免使用
$('#edittextinput_'+id+'').keyup() 因为没有必要在另一个函数中调用 keyup 函数

请在输入按钮中调用onkeyup javascript 函数

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

请看我的代码片段

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>