1

我面临 jquery onclick 事件和把手的问题。

我有一个车把模板，其中 ul、li 和 span 元素构成了一个水平导航菜单。我为每个跨度定义了一个类，编写了用于悬停和选择的 css 类。

悬停工作正常，但如果我选择 span 元素，我不会被重定向到包含的 JS 文件之一中存在的 onclick 事件。

这是我的车把模板。

var policyMenu = '<ul class="menu menuStyle"><li style="float:left;"><span class="mn selected" rel="environmental" title="Environmental policy" >Environmental</span></li><li style="float:left;"><span class="mn" rel="employee">Employee</span></li><li style="float:left;"><span class="mn" rel="customer">Customer</span></li><li style="float:left;"><span class="mn" rel="assets" >Assets</span></li></ul><br><br><br><div id="chart_container" style="min-width:39%;"></div>';

var policy_template = Handlebars.compile(policyMenu);

这是我的 JS 代码，它位于包含的 jS 文件中

alert($('ul.menu li span.mn'));
 $('ul.menu li span.mn').click(function(){
    alert("menu function");
    if ( $(this).hasClass('selected') )
        return;     
    $('ul.nav li span.mn').removeClass('selected');
    $(this).addClass("selected");

    selectedMenu = $(this).attr('rel');     
    alert(selectedMenu);
    //getResourceData(selectedSCA,'',0,0,0,0,0);
    displaySearchOptions();
});

我无法在 onclick 中打印警报。

4

1 回答 1

2

您应该使用委托，因为在您加载脚本的那一刻，您的新元素不会出现在 DOM 树上。这样，事件处理程序将附加到选择器的每个新元素。

$(document).on('click', 'ul.menu li span.mn', function() { 
    if ( $(this).hasClass('selected') )
        return;     

    $('ul.nav li span.mn').removeClass('selected');
    $(this).addClass("selected");

    selectedMenu = $(this).attr('rel');     
    displaySearchOptions();
});

来源：http ://api.jquery.com/on/

于 2013-11-14T11:10:39.353 回答