jquery - 回调到首页后无法触发按钮

Question

从调用的 Jquery ajax 检索数据后，我有几个按钮调用显示在首页，但是显示按钮但单击时无法触发它的行为，单击时我应该能够从按钮获得响应，谁能帮我解决这个问题？

ajax_network_programs_shortlist.php

$msg .= '<div style="clear:both;height:0;"></div>';
$msg .= '<div style="border:0px solid #33F;">';
$msg .= '    <div class="pg_btm" style="position:relative;text-align:right;">';
$msg .= '        <div>';
$msg .= '        <input id="btn_sendmsg" class="n_btn" name="send_message" type="button" value="SEND MESSAGE" />&nbsp;&nbsp;';
$msg .= '        <input id="btn_remove" class="n_btn" name="remove_my_shortlist" type="button" value="REMOVE FROM LIST" />&nbsp;&nbsp;';
$msg .= '        <a href="'.WEBSITE_URL.'network.php" title="More">BACK <img src="images/arrow_right.png" class="cropped" /></a>';
$msg .= '        </div>';
$msg .= '    </div>';
$msg .= '</div>';

$msg = "<div class='data'>".$msg."</div>"; // Content for Data

这是我在首页显示$msg回调的 div 块：

<form id="form4" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
    <div class="inner-main_content3" id="inner-main_content3" style="padding:0;">

        <div class="data"></div>
        <div class="pagination"></div>

    </div>
</form>  

我的JQ的ajax

<script type="application/javascript">
    $(document).ready(function(){

        $("#btn_sendmsg").click(function(){
            var parameters = $('#form4').serialize();

            $.ajax({
                url: 'ajax_send_message.php',
                data: parameters,
                type: 'POST',
                success: function(data){
                    if(data == 2){
                        alert('No Recepient Selected');

                    }else{
                        window.location = "mailto:XXX";

                    }

                    $('#form4')[0].reset();
                }
            });
        });

        $("#btn_remove").click(function(){
            var parameters = $('#form4').serialize();

            $.ajax({
                url: 'ajax_remove_shortlist.php',
                data: parameters,
                type: 'POST',
                success: function(data){
                    if(data == 1){
                        alert("Selected video(s) removed");
                        window.location.replace("<?php echo selfURL()?>");
                    }else{
                        alert("Please select video(s)");
                    }
                    $('#form4')[0].reset();
                }
            });
        });

        function loading_show(){
            $('#wait').html("<img src='images/loading.gif'/>").fadeIn('fast');
        }
        function loading_hide(){
            $('#wait').fadeOut('fast');
        }                
        function loadData(page){
            loading_show();                    
            $.ajax({
                type: "POST",
                url: "ajax_network_programs_shortlist.php",
                data: "page="+page,
                success: function(msg){
                    $("#inner-main_content3").ajaxComplete(function(event, request, settings){
                        loading_hide();
                        $("#inner-main_content3").html(msg);
                    });
                }
            });
        }
        loadData(1);  // For first time page load default results
        $('#inner-main_content3 .pagination li.active').live('click',function(){
            var page = $(this).attr('p');
            loadData(page);

        });

        $('#go_btn').live('click',function(){
            var page = parseInt($('.goto').val());
            var no_of_pages = parseInt($('.total').attr('a'));
            if(page != 0 && page <= no_of_pages){
                loadData(page);
            }else{
                alert('Enter a PAGE between 1 and '+no_of_pages);
                $('.goto').val("").focus();
                return false;
            }

        });


    });

谢谢。

解决方案：

替换$("#btn_sendmsg").click(function()为$('#btn_sendmsg').live('click',function(),

到目前为止，这解决了我的问题。

Answer 1

如果您希望点击处理程序适用于动态加载的元素，那么您将事件处理程序设置在父对象上（不会动态加载）并为其提供与您的动态对象匹配的选择器，如下所示：

$("#btn_sendmsg").on("click",function(){

alert('clicked');

});

$("#btn_remove").on("click",function(){

 alert('clicked');

});