Question

我正在尝试将AJAX用于即时制作的网络应用游戏。

简而言之，我有以下HTML：

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

在下面的JS中，您会看到当用户点击“战斗”时，脚本会运行以替换“main”中的内容

我还希望用户能够选择“改变”，这应该在“战斗”里面，并让它也改变为主。

目前，当用户点击“更改”时，它会运行脚本，更改主页，然后运行“战斗”并再次更改。

我需要在用户点击它时才运行“更改”。

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;
    }

Answer 1

更改

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

到

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

这使得只有事件目标是事件绑定的元素才会处理事件。

Answer 2

您需要将事件传递给更改功能：

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

堆叠的div使用jquery .click激活

2 个答案: