1

2 番目のボタンを機能させるにはどうすればよいですか? 最初のボタンはスムーズに実行されますが、2 番目のボタンはそうではありません。test_link をクリックすると、javascript によって作成された 2 番目のボタンが表示されます。

<script src="http://localhost/googledrive/www/ci/2.1.3/social/assets/jquery/jquery-1.7.1.js"></script>  
    <script type="text/javascript" >
    $(document).ready(function()
    {   
        $(".comment_button").click(function(){
            $.ajax({
                type: "POST",
                dataType : "json",
                url: "http://localhost/googledrive/www/ci/2.1.3/social/index.php/talk/test",
                data: { name: "John", time: "2pm" },
                success : function(cont) {
                    if(cont){
                        $.each(cont, function(key, val) {
                            alert(key+" "+val);
                        });
                        }
                     }              
            }); 
            return false;               
        });

        $(".comment_link").click(function(e){
        e.preventDefault(); 
        var element = $(this);
        var id = element.attr("post_id");
        $("#"+id).html('<input><button class="comment_button">Second button, not work</button>');  
        return false;
        });         
    });
    </script>



        <form method="post" action="http://localhost/googledrive/www/ci/2.1.3/social/index.php/talk/test/2">
        <button class="comment_button">first button, this_button works</button>
        </form>
        <div id="7"></div>
        <a href="http://localhost/googledrive/www/ci/2.1.3/social/index.php/talk/test/2" class="comment_link" post_id="7">test_link</a>
        <br>
        php code : <?php echo json_encode($_POST);?>
4

1 に答える 1

0

ボタンが DOM に追加される前にメソッドを設定しています。.click()次のように JavaScript を再定義できます。

$(document).ready(function () {
    $(".comment_link").click(function (e) {
        e.preventDefault();
        var element = $(this);
        var id = element.attr("post_id");
        $("#" + id).html('<input><button class="comment_button">Second button, not work</button>')
        .children(".comment_button").click(function () {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "http://localhost/googledrive/www/ci/2.1.3/social/index.php/talk/test",
                data: {
                    name: "John",
                    time: "2pm"
                },
                success: function (cont) {
                    if (cont) {
                        $.each(cont, function (key, val) {
                            alert(key + " " + val);
                        });
                    }
                }
            });
            return false;
        });
        return false;
    });
});

.click()ボタンを追加した後にメソッドをチェーンし、親で検索します。または：

$(document).ready(function () {
    $(".comment_link").click(function (e) {
        e.preventDefault();
        var element = $(this);
        var id = element.attr("post_id");
        $("#" + id).html('<input><button class="comment_button">Second button, not work</button>')
            .children(".comment_button").click(commentButtonClicked);
        return false;
    });

    function commentButtonClicked() {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "http://localhost/googledrive/www/ci/2.1.3/social/index.php/talk/test",
            data: {
                name: "John",
                time: "2pm"
            },
            success: function (cont) {
                if (cont) {
                    $.each(cont, function (key, val) {
                        alert(key + " " + val);
                    });
                }
            }
        });
        return false;
    }
});

ajax呼び出しを別の非匿名関数に移動.click()し、前の例のようにチェーンされたイベントから呼び出します...

于 2013-06-19T16:36:15.867 に答える