Question

I am trying to use AJAX for a web app game that im making.

In short, I have the following HTML:

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

In the following JS, you’ll see that when the user clicks “fight” a script runs to replace the content in ‘main’

I also want the user to be able to alternatively click “change” which should be inside “fight” and have it change main as well.

Currently, when the user clicks “change” it runs the script, changes main, then runs “fight” and changes it again.

I need to to only run “change” when the user clicks on that.

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

Change

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

to

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

This makes the event only get processed if the event target is the element the event is bound to.