Question

我已经尝试了所有可能的解决方案，但它仍然不适合我。

我正在使用ajax调用php页面，比如livesearch.php，从索引页面获取实时搜索结果。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $("#livesearch").on("click", "a.alert", function() {
                alert("here");
            });
        </script>   
        <script>
            function showResult(str) {
                if (str.length == 0) {
                    $("#livesearch").empty();
                    $("#livesearch").css('display', 'none');
                    return;
                }

                $.ajax({
                    type: "GET",
                    url: "livesearch.php?q=" + str,
                    success: function(responseText) {
                        $("#livesearch").html(responseText);
                        $("#livesearch").css('display', 'block');
                        $("#livesearch").css('background', '#fff');
                    }
                });
            }
        </script>
    </head>
    <body>
        <form>
            <input type="text" size="30" onkeyup="showResult(this.value)" onblur="showResult('')" placeholder="search here">
            <div id="livesearch" style="height:500px;width:900px;overflow-y:scroll;display:none;z-index:99999;"></div>
        </form>
        <div id="gentext" style="position:fixed;top:40px;z-index:-1;">This is just a dummy text to check if result div overshadow this line or not.</div>
    </body>
</html>

工作正常并列出可能的搜索。现在，从搜索结果中，用户可以单击页面进行浏览 - 简单。只要在链接上单击一下，我就想抓住它并进行一些处理。请参阅上面代码中的以下部分：

$("#livesearch").on("click", "a.alert", function() {
    alert("here");
});

首先，我正在测试，如果我能够捕获点击从ajax搜索返回的这个链接或不 - 所以警告（“这里”），但它不起作用。

请你

Answer 1

在附加链接后定义点击方法：

success: function(responseText)
{
   $("#livesearch").html(responseText);
   $("#livesearch").css('display', 'block');
   $("#livesearch").css('background', '#fff');
   $("#livesearch").on("click", "a.alert", function() 
   {
      alert("here");
   });
}

Answer 2

试试这个，让我们知道控制台返回的内容：

$.ajax({
    type: "GET",
    url: "livesearch.php?q=" + str,
    success: function(responseText) {

       console.log(responseText); //CHECK YOUR CONSOLE 

       $("#livesearch").append(responseText);
       $("#livesearch").css('display', 'block');
       $("#livesearch").css('background', '#fff');
       $("#livesearch").find(".alert").click(function(e) {
           e.preventDefault();
           alert("here");
       });
    }
});

另一种实现此目的的方法是像这样<a href="" onclick="return myFunction()"></a>构建你的锚标签，然后创建JS函数：

myFunction(){
    alert("here")
    return false;
}

Ajax：ajax响应中的链接不起作用

2 个答案: