jQuery不能在超链接上点击

问题描述：

我写了一个php脚本index.php，如下所示。该脚本将在加载时创建一些超链接。如果我点击这些超链接中的任何一个，它将加载example.php的输出div标签id="myDiv"。example.php的输出又是一些超链接，我希望在点击这些链接时执行jquery函数。在这种情况下，我给了这个jquery函数里面的一个alert，但它没有执行该jquery函数。整个代码如下。请帮我解决这个问题。jQuery不能在超链接上点击

<?php 
    $mainlinks = array("10.3.2.0","10.3.2.1","10.3.2.2"); 
    for($i=0;$i<count($items);$i++) 
    { 
     echo "<a class='likelink' href='javascript:void(0)'>$mainlinks[$i]</a>" . "<br>"; 
    } 
?> 

<html> 
    <head> 
    <script src="jquery/jquery-1.9.1.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $('.likelink').click(function() { 
     $('#myDiv').load("example.php");         
     }); 
    }); 
    $(function() { 
     $('.sublink').click(function() { 
      alert("hello");         
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <div id="myDiv"></div> 
    </body> 
</html>

这我使用example.php文件

<?php 
    $sublinks = array("abcd","efgh","ijkl"); 
    for($i=0;$i<5;$i++) 
    { 
     echo "<a class='sublink' href='javascript:void(0)'>sublinks[$i]</a>" . "<br>"; 
    } 
?>

答

由于sublink加载索引页时不存在，则需要使用委派事件注册模型来处理click事件。

使用.on()注册点击事件，因为sublink的加载到#myDiv您可以使用下面的代码。

$(function() { 
    $('#myDiv').on('click', '.sublink', function() { 
     alert("hello");         
    }); 
});

更新：
基本解释将沿的......当您使用click()注册事件处理程序方法将处理程序添加到只有那些出现在DOM当时这些元素的走行代码的执行。当你处理元素的动态创建/加载时，这将不起作用，因为命令执行时元素可能不在dom中

这很好工作dude.Can你在这里解释的逻辑。我对Jquery很陌生，这就是为什么问。 – user2356932 2013-05-08 07:27:22

@ user2356932了解更多信息的一个简单方法是搜索'使用jQuery添加事件处理程序到动态元素'。 – 2013-05-08 07:29:39

感谢兄弟的解释。 – user2356932 2013-05-08 07:31:25

答

在你的问题中，当你的页面加载时，子链接不存在需要使用委托事件来处理点击事件。

$(function() { 
    $(document).on('click','.likelink',function(e) { 
     e.preventDefault(); 
     $('#myDiv').load("example.php");         
    }); 
});

从jquery.on()

的事件处理程序仅结合到当前选择的元素;它们必须在您的代码拨打.on()时在页面上存在。为确保元素存在且可以选择，请在文档就绪处理程序中为页面上HTML标记中的元素执行事件绑定。如果将新的HTML注入页面，请在将新的HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优点是它们可以处理来自稍后添加到文档中的后代元素的事件。

此外，你php code应该在body你是echoing的links

像

<body> 
    <?php 
     $mainlinks = array("10.3.2.0","10.3.2.1","10.3.2.2"); 
     for($i=0;$i<count($items);$i++) 
     { 
      echo "<a class='likelink' href='javascript:void(0)'>$mainlinks[$i]</a>" . "<br>"; 
     } 
    ?> 
</body>

This是不正确的，甚至没有试图解释实际问题或解决方案。 – andyb 2013-05-08 07:30:24

jQuery不能在超链接上点击

相关推荐