2012-10-24 101 views
0

我有一個<li>項目裏面有JQuery代碼。我想克隆<li>,並在克隆<li>內更改$.getJSON url。可能嗎?

下面的代碼:

<ul class="exercise2">2:2 Exercise - 1 

      <li class="exset327" id="exset327"><var class="exset">327</var>:Сет - <var class="setnum">1</var> 
       <a class="DelSet" href="#">[-]</a> 
       <script> 
       $(".exset327 a").click(function() { 
        $.get("/workouts/del_set/327/"); // Here I want to change '327' in cloned item to some variable then clone 
        $(this).parent().remove(); 
        $(".exercise2 li").each(function(){ 
        $(".setnum",this).html($(this).index() + 1); 
        }); 
        return false; 
       }); 
       </script> 
      </li> 

     <a class="AddSet" href="#">Add set</a> // link which make a clone of above <li> 
     <script> 
      $(".exercise2 a.AddSet").click(function() { 
      $.getJSON("/workouts/add_set/2/", function (json) { 
       //alert(json.newsetnum); 
       var newsetid = json.newsetid;   // returnet from server 
       var newsetnum = json.newsetnum;  // returned from server 
      // clone 
      var clonedLi = $(".exercise2 li:last").clone(true); // 'true' to clone with event handler 
      // change attributes 
      $(clonedLi).attr("id", "exset" + newsetid); 
      $(clonedLi).attr("class", "exset" + newsetid); 
      // change content 
      $(clonedLi).find(".exset").html(newsetid); 
      $(clonedLi).find(".setnum").html(newsetnum); 
      // add 
      $(clonedLi).insertAfter(".exercise2 li:last"); 
      }); 
      }); 
     </script> 
</ul> 

如果我不會改變URL當我向短聲[-](刪除)上克隆<li>鏈接是刪除以前的。

+0

*是否可能?*是的 – karim79

+0

完美。你能解釋一下如何或給出一個鏈接?謝謝。 – andrey

回答

0

我會用另一種方式回答你,因爲你的做法看起來並不理想。克隆DOM元素很好,但克隆標籤並不是很優雅。

看起來你正在做同樣的動作,但有不同的元素或變量。使用泛型類進行這些工作有一個很好的方法 - 使用.data()更加精確。

的HTML

<li class="exset327" id="exset327"> 
    <var class="exset">327</var>:Сет - <var class="setnum">1</var> 
    <a class="DelSet" href="#" data-exset="327" >[-]</a> 
</li> 

和JS:

$(document).on("click", ".DelSet", function() { 
    var exset = $(this).data("exset"); 

    $.get("/workouts/del_set/"+exset+"/"); 
    $(this).parent().remove(); 
    $(".exercise2 li").each(function(){ 
     $(".setnum",this).html($(this).index() + 1); 
    }); 
    return false; 
}); 

的JavaScript的這一部分將確保每一個新的 「.DelSet」 將有一個點擊監聽器,並執行下面的代碼。

所以你需要做的就是克隆< li>並修改data-exset。

$(clonedLi).find(".DelSet").data("exset", netsetid); 
+0

完美的解決方案!正是我想要的。謝謝。 – andrey