Question

我是一名新手，试图在社区网站上为每个实体显示一张地图。每个实体都有一个唯一的ID。

通过jquery点击一个类代码为＆＃34; action＆＃34;

的图片来触发加载

$(document).ready(function(){
  $("#ABC_Seamless_Home_Improvement_Center+.action").click(function(){
    $("#ABC_Seamless_Home_Improvement_Center").load("demo_test_maps.htm #ABC_Seamless_Home_Improvement_Center");
  });
});

<div id="ABC_Seamless_Home_Improvement_Center"><h2>Let jQuery AJAX Change This Text</h2></div>
<a href="#" class="action"><img src="images/map_20x12.jpg"></a>

正在加载的资料包括带有类代码的图像＆＃34; map-icon＆＃34;我希望能给我一个jquery hide的句柄。

<a href="#" class="map-icon"><img src="images/close_hover.png"></a>

我已经能够将正确的材料加载到此测试文档中。但是，在现实世界中，这将显示在其他显示内容的顶层，因此我需要允许访问者隐藏刚刚加载的内容。

我不知道如何编码。

我需要更改此代码，以便Jquery hide在每种情况下对jquery Ajax加载的材质生效。

Answer 1

我相信你可以在load（）Jquery API

的回调函数中设置事件处理程序

$(document).ready(function(){
  $("#ABC_Seamless_Home_Improvement_Center+.action").click(function(){
    $("#ABC_Seamless_Home_Improvement_Center").load("demo_test_maps.htm #ABC_Seamless_Home_Improvement_Center", function(){
      $(".map-icon").click( function(){
         $("#ABC_Seamless_Home_Improvement_Center").hide();
      });
    });
  });
});

<div id="ABC_Seamless_Home_Improvement_Center"><h2>Let jQuery AJAX Change This Text</h2></div>
<a href="#" class="action"><img src="images/map_20x12.jpg"></a>

Answer 2

为了向dymanically注入的内容添加处理程序，最好的方法是使用jQuery .on()方法（docs）并传递selector参数。

基本上你将click函数绑定到某种类型的包含元素（它总是在DOM中），当触发此事件单击时，它会看到目标元素是否与你传递它的选择器相匹配（然后冒泡）到你的点击手柄）。实施例;

// bind click handler
$('#container').on('click', '.loaded', function(){
    // do something on click
    alert($(this).html());
});

// bind the AJAX load handler
$('#someButton').click(function(){
    //this func uses ajax to load html ito the container
});

<!-- initial HTML -->
<div id='someButton'>Click Me To load content</div>
<div id='container'>
    <!-- jQuery loads data via AJAX -->
</div>

好的，所以当你单击#someButton div时，它会使用ajax加载数据（这个函数我已经省略了）。然后它将HTML放入#continaer div中，因此HTMl现在看起来像这样。

<div id='container'>
    <div class='loaded'>content</div>
    <div class='loaded'>content1</div>
    <div class='loaded'>content2</div>
</div>

现在，如果您单击三个div之一，它们的内部HTML将被警告。如果你单击.loaded div，点击事件会冒泡到#container，然后导致顶部的点击处理程序归档。根据点击处理程序，它会查看您传递的选择器（＆＃39; .loaded＆＃39;）是否与冒泡点击事件的目标元素匹配，如果匹配，则确实如此（在这种情况下是这样）执行回调函数。

允许单击jquery隐藏jquery ajax加载的内容

2 个答案: