exiavso
exiavso
采纳率100%
2017-08-19 02:21 阅读 1.6k

用ajax加载出来的标签不能使用jq效果

直接上代码直观一点

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

  $(".li a").click(function(){
  $(this).toggleClass("on");
  });

});
/*******************************/
function ajax()
{
    $('#ajax1').load("ajax.php");
}
/*******************************/
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("ajax2").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax.php",true);
xmlhttp.send();
}
</script>
<style>
.on {font-size:20px; font-weight:bold; color:#03C;}
</style>

<div class="ul">
  <div><input type="button" value="方法1" onclick="ajax()" /> <input type="button" value="方法2" onclick="loadXMLDoc()" /></div>
  <div class="li"><a href="javascript:void(0)">点击变大</a></div>  
  <div id="ajax1"></div>
  <div id="ajax2"></div>
</div>

<?php
$html = '<div class="li"><a href="javascript:void(0)">点击没反应</a></div>';
echo $html;
?>

有没有什么方法可以解决

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2017-08-19 06:25

    改为on,要不执行

     $(".li a").click(function(){
      $(this).toggleClass("on");
      });
        这句只会给已经存在的dom对象添加事件,后续的加进来的因为上面的已经执行过是不会绑定上事件的
    
        $(document).on('click','li a',function(){
          $(this).toggleClass("on");
        })
    
    点赞 4 评论 复制链接分享
  • stopllL white_g 2017-08-19 05:56

    添加事件的时候你ajax动态加载的dom并没有出来,所以你上面的$(".li a")并没有获取到动态加载的li上面。两种办法解决。
    第一种是动态加载完成dom之后再添加事件。
    第二种是使用jquery的事件委托,如果你的jq版本稍微高一点,on事件还有一个可选参数

    点赞 1 评论 复制链接分享
  • qq_35235940 听楼一夜雨 2017-08-19 03:07

    改成点击事件吧:

     <a herf="javascript:;" onclick="方法('参数',this)">//注意this
    
     function 方法('参数',obj)(){
                $(obj).toggleClass("on");
     }
    
    点赞 评论 复制链接分享

相关推荐