JQuery: can't re-update links (I'm new to JQuery)_问答_开发者

JQuery: can't re-update links (I'm new to JQuery)

开发者 https://www.devze.com 2023-01-30 15:31 出处：网络

I\'m new to Jquery and I\'m getting crazy to reupdate in ajax a code containing urls!! It works the first time, but the link does not work any longer after ajax response rewrites html.

相关专题：jquery php

I'm new to Jquery and I'm getting crazy to reupdate in ajax a code containing urls!! It works the first time, but the link does not work any longer after ajax response rewrites html.

Please, find below my code.

First the HTML markup (View)

<head>  
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">  
  $(document).ready(function() { 
    $("a[class=unselected_quid], a[class=quid_selected]").click(function(){
        var url = $(this).attr("name");
        alert(url);
        $.ajax({
            url: "index.php", 
            type: "POST",  
            data: url,
            da开发者_Go百科taType: "html",
            success: function(msg) {    
                $("#result").html(msg);  
            },
            error: function(){
                alert("error!!!");
            } 
        });
    });
  });
</script>  
</head> 

<?php // set url strings in php
  $url = "component=Training&ctrl=JQueryTraining&task=ajaxLinkResponse&data=1";
  $url2 = "component=Training&ctrl=JQueryTraining&task=ajaxLinkResponse&data=2";
?>

<body>  
  <div id="result"><br>
    <a name='<?echo $url?>' href='javascript:void(0)' title='uno' class='selected_quid'>link a</a> <br>
    <a name='<?echo $url2?>' href='javascript:void(0)' title='due' class='unselected_quid'>link b</a><br>
  </div>  
</body>

Then the PHP (Controller)

public function ajaxLinkResponse(){
  $url = "component=Training&ctrl=JQueryTraining&task=ajaxLinkResponse&data=1";
  $url2 = "component=Training&ctrl=JQueryTraining&task=ajaxLinkResponse&data=2";

  $code = "<a name='{<?$url?>}' href='javascript:void(0)' title='uno' class='selected_quid'>link a</a> 
  <a name='{<?$url2?>}' href='javascript:void(0)' title='due' class='unselected_quid'>link b</a>";  

  echo($code);
}

You need to use .live() or .delegate() instead of .click() as you are making new DOM elements in your AJAX call and .click() does not cater for DOM element creation.
i.e.

$("a[class=unselected_quid], a[class=quid_selected]").live('click',function(e){
e.preventDefault();
// rest of code

$(aWrapper).delegate('a[class=unselected_quid], a[class=quid_selected]','click',function(e){
e.preventDefault();
// rest of code

You may ask 'What's the difference?' well this should help. Basically delegate is faster, will not crash with heavy DOM traversals, and you can supply a context (this is a big feature).