Question

我遇到了jquery onclick事件和把手的问题。

我有一个带有ul，li和span元素的把手模板，形成一个水平导航菜单。我为每个跨度定义了一个类，为hover和selected选择了写入的css类。

Hover工作正常，但是如果我选择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中打印警报。

Answer 1

您应该使用委托，因为在加载脚本时，您的新元素不会出现在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/

无法为handlebar span类调用onclick

1 个答案: