Question

我有两个按钮＆＃34;插入＆＃34;和＆＃34;选择＆＃34;它们用于使用AJAX插入和显示记录，我希望它们都具有独立的功能，因为每当我点击选择按钮时，应该显示记录，当我点击插入时，应该插入记录。现在在下面的代码中，选择的第二个按钮取决于点击插入按钮。我想要独立工作。

<script>
    $(document).ready(function(){ 
    $('#insert').click(function(event){
            event.preventDefault();
            $.ajax({
            url:"back1.php",
            method:"post",
            data:$('form').serialize(),
            dataType:"html",
            success:function(strMsg)
            {
                $('#select').click(function(event){
                event.preventDefault(); 
                $.ajax({
                url:"back1.php",
                dataType:"html",
                success:function(strMsg)
                {
                    $('#Smsg').html(strMsg);    
                }                   
                    });


                });

                $('#Imsg').html(strMsg);

            }


        });  
    });
});
</script>

Answer 1

如上面的注释中所述，因为您在insert按钮的success方法中为select按钮定义了事件处理程序，所以依赖于该功能。

顺便说一句，逻辑上可能是正确的：如果在触发select请求之前你需要插入请求的响应。在这种情况下，应该存在这种依赖性。无论如何，如果不是这样，只需将事件处理程序移到外面：

// when everything is ready...
$(document).ready(function(){ 

    // first event handler
    $('#insert').click(function(event){
            event.preventDefault();
            $.ajax({
                url:"back1.php",
                method:"post",
                data:$('form').serialize(),
                dataType:"html",
                success:function(strMsg) {
                    $('#Imsg').html(strMsg);
                }
        });  
    });

    // second (independent) one
    $('#select').click(function(event){
        event.preventDefault(); 
        $.ajax({
            url:"back1.php",
            dataType:"html",
            success:function(strMsg) {
                $('#Smsg').html(strMsg);    
            }
        });
    });
});

还有一些事项 - 我建议使用on代替click：

$('#select').on('click', function(event){...});

并尝试避免重复代码，在您的情况下，您可以执行以下操作：

function AjaxEventHandler(data, targetObject) {
    $.ajax({
        url:"back1.php",
        method:"post",
        data: data,
        dataType:"html",
        success:function(strMsg) {
            targetObject.html(strMsg);
        }
    });
}

$(document).ready(function(){ 
    $('#insert').on('click', function(event) {
        event.preventDefault();
        AjaxEventHandler($('form').serialize(), $('#Imsg'))
    });

    $('#select').on('click', function(event) {
        event.preventDefault();
        AjaxEventHandler({}, $('#Smsg'))
    });
});

如何使用Jquery

1 个答案: