1

私が作っているウェブアプリゲームにAJAXを使おうとしています。

要するに、私は次のHTMLを持っています：

<li id='fight'><div id='change'></div></li>

次のJSでは、ユーザーが「ファイト」をクリックすると、スクリプトが実行されて「メイン」のコンテンツが置き換えられることがわかります。

また、ユーザーが「ファイト」内にあるはずの「変更」をクリックして、メインも変更できるようにしたいと思います。

現在、ユーザーが「変更」をクリックすると、スクリプトが実行され、メインが変更されてから、「ファイト」が実行され、再度変更されます。

ユーザーがそれをクリックしたときにのみ「変更」を実行する必要があります。

JS：

$("#fight").click(function() {
    var page = 'fight';
    getmain(page)
});

$("#change").click(function() {
    var page = 'change';
    getmain(page);
    evt.stopPropagation();
});

function getmain(page){
     $.ajax({
            type: "POST",
            async: false,
            url: 'welcome/loadmain',
            dataType: 'json', 
            data: { page: page },
            success: function(content){
                var html = '';
                html += content['content'];
                $('#main').html(html);
            }
        });    
}

$.ajax({
    type: "POST",
    async: false,
    url: 'welcome/loadmain',
    dataType: 'json', 
    data: { page: 'get_zone' },
    success: function(content){
        var html = '';
        html += content['content'];
        $('#fight').html(html);
    }
});

HTML

    public function get_zone()
    {
        $user_id = $this->tank_auth->get_user_id();
        $itemroll = $this->db->query("SELECT current_zone, z.name FROM user_load ul
                                    INNER JOIN zones z
                                    ON z.id = ul.current_zone
                                    WHERE ul.user_id = $user_id");
        $result = $itemroll->row_array();
        $zone['current_zone']= $result['current_zone'];
        $zone['name'] = $result['name'];
        //HTML Formatting
        $content = '';
        $content .= "<div id='zonename'>Zone = ". $zone['name']. "</div>";
        $content .= "<div id='change'>Change Zone</div>";
        return $content;
    }
4

2 に答える 2

4

変化する

$("#fight").click(function() {
    var page = 'fight';
    getmain(page)
});

に

$("#fight").click(function(e) {
    if ($(this).is(e.target)) {
        var page = 'fight';
        getmain(page);
    }
});

これにより、イベントターゲットがイベントがバインドされている要素である場合にのみ、イベントが処理されます。

于 2012-06-25T19:34:22.823 に答える
4

イベントを変更関数に渡す必要があります。

$("#change").click(function(evt) {
  evt.stopPropagation();
  var page = 'change';
  getmain(page);
});
于 2012-06-25T19:35:40.140 に答える