Question

我是jQuery的新手，我从外部HTML页面加载了一个div，我想执行点击，隐藏，显示等功能。问题是我试图放置我想要完成的功能在HTML页面脚本中，但它们不起作用。我看到#helpPage加载的div。

HTML页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">    </script>
    <script>
        $(document).ready(function(){
            $( "#loadHelpHere" ).load( 'help.html #helpPage' );
            $('#helpSection div').not(".helpDiv").hide();
            $('.justClick').bind('click', function() {      
                $('#helpSection div').not(".helpDiv").hide();
                $('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index()+1)).html());
            });
        });
    </script>
    <style>
        #helpMenu ul li{margin: 0 0 5px 0;}
    </style>
</head>
<body>
    <div id="loadHelpHere"></div>
</body>
</html>

这是从外部HTML页面加载到div中的内容：

 <div id="helpPage">
        <div id="helpMenu">
            <header>Help Documentation</header>
            <article>
                <h4>Help Menu</h4>
                <ul id="menu">          
                    <li class="current_page_item justClick"><a href="#" data-id="div1">Help Section 1</a></li>
                    <li class="justClick"><a href="#" data-id="div2">Help Section 2</a></li>
                    <li class="justClick"><a href="#" data-id="div3">Help Section 3</a></li>
                </ul>
            </article>
        </div>
        <div id="helpSection">
            <div class="helpDiv">
                <header>Help Documentation</header>
                <article>
                    Works!
                </article>
            </div>
            <div class="helpDiv1">
                <header>Help Documentation content 1</header>
                <article>
                    Help Section 1
                </article>
            </div>
            <div class="helpDiv2">
                <header>Help Documentation content 2</header>
                <article>
                    Help Section 2
                </article>
            </div>
            <div class="helpDiv3">
                <header>Help Documentation content 3</header>
                <article>
                    Help Section 3
                </article>
            </div>
        </div>
    </div>

感谢任何帮助。

Answer 1

Event delegation是您想要用于动态加载到DOM中的HTML元素的内容。 .on()方法是开始的地方。

示例

$(document).on('click', '.justClick', function(e){ $('#helpSection div').not(".helpDiv").hide(); $('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index()+1)).html()); });

有问题吗？

从外部html执行加载的html div上的函数

1 个答案: