Question

我正在使用ajax调用在我的menu.html中插入index.html，调用jquery脚本menu-script.js来处理这个嵌套菜单的hide \ show功能是正确的加载并执行到index.html（确实菜单全部关闭），但是单击菜单项时不会触发on.('click', function(){.. etc。

这是剧本：

$(function() {
$('body').addClass('js');
var menu = $('#menu'),
    menulink = $('.menu-link'),
    menuTrigger = $('.has-subnav > a');

menulink.on('click', function(e) {
    console.log('menulink cliked');
    e.preventDefault();
    menulink.toggleClass('active');
    menu.toggleClass('active');
});

menuTrigger.on('click', function(e) {
    console.log('menutrugger cliked');
    e.preventDefault();
    $(this).toggleClass('active').next('ul').toggleClass('active');
});

$('a[href*=#]:not([href=#])').on('click', function() {
    console.log('ahref?');
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html,body').animate({ scrollTop: target.offset().top }, 600);
            return false;
        }
    }
});

menu.html（部分内容）：

<div id = "nav-menu" class = "nav-menu">
    <a href = "#menu" class = "menu-link has-subnav"><img src = "include/menu.png"></a>
    <div id = "menu" class = "menu">
        <ul>
            <li class="search">
                <!-- Google Custom Search -->
            </li>
            <!-- Core Rulebook -->
            <li class = "has-subnav">
                <a href = "#">Manuale Base</a>
                <ul class = "level-2">
                    <li><a href = "gettingStarted.html">Per iniziare</a></li>
                    <li><a href = "races.html">Razze</a></li>
                    <li><a href = "classes.html">Classi</a></li>
                    <li><a href = "usingSkills.html">Abilitàs</a></li>

Answer 1

使用事件委托：

$('parentSelector').on('event', 'element', function() {
    // Event handler code here.
});

将一个或多个事件的事件处理函数附加到所选元素。

Docs

Answer 2

访问可以使用的动态添加元素

$(document).on("click", ".selector", function()
{

});

Answer 3

您可以在生成html时使用html中的函数onclick="exampl_function()"

jquery .on在动态添加的内容上未检测到单击

3 个答案: