jQuery选择器中的动态ID无法使用

Question

jQuery选择器中的动态ID无法使用

3

我尝试了这个，但是ajax调用了两次PHP文件或显示其他部分两次。请帮助我。我在按钮中调用了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>");
        }
    });
}

- Bhaskararao Gummidi

请提供已解析的HTML，HTML元素是否是动态生成的？此外，您的事件处理程序不应该在函数内部，这意味着如果您从未调用“editCat”，它们可能不会被设置。 - Spencer Wieczorek

<input name="" placeholder="Enter categorie name" id="edittextinput_1" value="Frocks" type="text"> - Bhaskararao Gummidi

但是我想调用事件来触发“回车”键。 - Bhaskararao Gummidi

请提供解决方案，先生。 - Bhaskararao Gummidi

你从哪里调用了 editCat 函数？ - Mahbubul Islam

@Mahbubul Islam，我更新了我的HTML。 - Bhaskararao Gummidi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pritamkumar · 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>