如何通过php-ajax与jquery动作连接生成的链接?

时间:2014-03-05 14:23:15

标签: javascript php jquery html ajax

有这样的情况:

trollindex.htm:

[...]
<script>
    $(document).ready(function(){
      $("* a.jquery").on("click",function(){
        $.ajax({
            type: "POST",
            url: "trollcommander.php",
            data: ({command: $(this).attr('command')}),
            cache: false,
            contentType: "application/x-www-form-urlencoded;charset=iso-8859-2",
            success: function(result)
            {
                $("div.troll").html(result);
            }
        });
      });
    });
</script>
[...]
<div class="troll">
    //BEGIN result before click a.prepareTrolling:
        <p>You can not be trolled yet.</p>
        <a class="jquery" command="prepareTrolling">Prepare Trolling</p>
    //END result before click a.prepareTrolling;

    //BEGIN result after click a.prepareTrolling and before click on a.trollMeNow:
        <p>Trolling is prepared. Are you ready?</p>
        <a class="jquery" command="trollMeNow">Troll me now!</a>
    //END result after click a.prepareTrolling and before click on a.trollMeNow;

    //BEGIN result after click on a.trollmenow:
        <p>Congratulations! You are successfully trolled!</p>
    //END result after click on a.trollmenow;
</div>
[...]

trollcomander.php:

<?php
    [...]
    $response = "";
    if(isset($_POST['command']) {
        switch($_POST['command']) {
            case "prepareTrolling":
                $response = prepareTrolling() // "This command works ok";
            break;
            case "trollMeNow":
                $response = trollMeNow() // "This command does not want to work :(";
            break;
            default:
                $response = "Unknown command";
            break;
        }
    }
    echo $response;
?>

所以,当我点击a.prepareTrolling时,一切正常,但是当我想点击由prepareTrolling()生成的a.trollMeNow时,命令trollMeNow没有运行。我认为jquery在加载页面之后将元素a.prepareTrolling与onclick动作连接起来,但是在使用元素a.trollMeNow更改div.troll之后它无法做到这一点。如何使用jquery onclick动作连接元素a.trollMeNow?

3 个答案:

答案 0 :(得分:0)

在链接上执行onclick事件可能会更好。这样就可以避免以后加载的元素出现任何问题。例如:

<a href="#" onclick="yourFunction();">Troll me now!</a>

希望有所帮助

答案 1 :(得分:0)

您需要事件委派:

$(".troll").on("click", 'a.jquery',function(){

或 - 如果有更多地方可以显示链接:

$("body").on("click", 'a.jquery',function(){

答案 2 :(得分:0)

我怀疑你动态添加了ps。

然后,您需要对您的点击监听器进行略微不同的调用

$(document).on('click', 'a.jquery', function ...)

让它听取动态添加的元素。