Question

我正在尝试使用jQuery加载函数包含页面，但是页面无法访问父元素的任何jQuery脚本。任何人都可以告诉我如何使这个工作。由于我正在使用Laravel的刀片模板，我正在粘贴我的测试代码。但是，这可以在任何HTML-jQuery设置中重现。

以下代码中的问题是，当您单击测试页面中的两个div时，不会调用任何函数。（基本上它不是在父语句中识别jQuery。如果我将脚本代码粘贴在同一页面中，它可以工作）

// page 1.php

<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mails</title>

{{ HTML::script('http://code.jquery.com/jquery-2.0.2.js') }}
{{ HTML::script('http://code.jquery.com/ui/1.10.4/jquery-ui.js') }}

<link rel="stylesheet" type="text/css" href="{{URL::asset('http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.min.css')}}" />
<script type="text/javascript">
$(document).ready(function(){
$("#testId").load("test")
$('.testClass').click(function(e) {
alert("test");
});
 });
</script>
</head>
<body>
   hj
    <div id="testId"></div>
</body>
</html>

//测试页面（加载的页面）

<div class="testClass">test1</div>
<div class="testClass">test2</div?>

Answer 1

$('#testId').on('click', '.testClass', function(e) {
    alert("test");
});

https://learn.jquery.com/events/event-delegation/

Answer 2

试试这个。

$(document).ready(function(){
 $("#testId").load("test")
     $('.testClass').live('click', function(e) {
     alert("test");
});
 });

<强>更新：抱歉不推荐使用.live()方法。使用.on()附加事件处理程序。

courtesy

根据我以前做过的文件

   $(document).ready(function(){
     $("#testId").load("test")
         $('.testClass').on('click', function(e) {
         alert("test");
    });
     });

这个函数会将处理程序附加到包含'testClass'类的所有元素，但是委托事件方法只将事件处理程序附加到一个元素（如spookey建议的那样）。

$( ".testclass" ).on( "click", ".testclass", function() {
  alert("test");
});

jQuery不适用于使用jQuery包含的页面

2 个答案: