委託附加在一個非事件

我有一些JavaScript應用更改一些元素和一個函數加載更多這樣的元素。就像是：委託附加在一個非事件

<ol id="test"><li>click</li></ol> 
<script type="text/javascript"> 
    $(function() { 
     $('OL').delegate("li","click",function(){ 
     $('#test').append('<li>click</li>'); 
    }); 
</script>

這是代表的基本功能和它的作品。我可以點擊多個<li>元素。

的問題是，我想，additonaly做到以下幾點：

$(function() { 
    $('li').css('color','red'); 
    //this is just an example, I don't need to paint the text red :) 
});

所有li不只是在頁面加載加載的。

我還沒有能夠將這些改變附加到任何東西（沒有事件表明我已經加載了上述附件中的元素）。另外我知道我可以調用$('li').css('color','red');每次我呼籲追加（或在我真正工作的事情ajax回調）。但我有一個系統，有很多Ajax調用返回不同的HTML和大量的插件和jQuery的工作人員需要執行這些元素。我不想做一個巨大的「刷新」功能，在每一次Ajax成功時都會被調用。

現在我找到的唯一的解決辦法是一切綁定到一個任意事件，做一個觸發器調用該事件對每個Ajax負荷這樣的：

<ol id="test"><li>click</li></ol> 
<script type="text/javascript"> 
    $(function() { 
     $('OL').delegate("li","click",function(){ 
      $('#test').append('<li>click</li>'); 
      $('#test').children().trigger('load'); 
     }); 
</script>  
<script type="text/javascript"> 
    $(function() { 
     $('OL').delegate("li","load",function(){ 
      $(this).css('color','red'); 
     }); 
    }); 
</script>

這適用於AFER加載所有元素首先。所以我需要一些額外的代碼，但它作品。

有沒有人有更好的解決方案？任何方式爲非活動做「活」？

謝謝！

編輯關於在代碼中的「紅」的例子...我需要做的修改是那些以及很多其他：

('BODY').delegate(".mcs_container","load",function(){ $(this).mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","no","no",0); }).trigger('load');

所以我覺得只有觸發功能將運行。

EDIT 2 我已經在這裏創造一個工作示例： http://jsfiddle.net/THHNS/5/ 我試圖做到的是要能夠避免$('LI').trigger('focus');

編輯3 我用的是額外的觸發ON時代表應該足夠好。更新示例： http://jsfiddle.net/THHNS/26/

來源

2012-06-25 Miquel Adell

嗯，這似乎是不可能的atach現場函數調用的東西，不是一個事件。我發現最好的解決方案是以下幾點。

<head> 
<script type="text/javascript"> 
    $(function() { 
     $(document).on("click","li", function(){ 
      //this click simulates an ajax call 
      //the html appendend is generated and can have a lot of elements that need javascript work 

      //this simmulates the html append 
      $('#test').append('<li>click</li>'); 

      //in my proposed solution the function that attachs the HTML will recur all children of the attached element and trigger a custom event 
      $('#test').children().trigger("myLoaded"); 
     }); 

     //all jquery functions that usually are called like: 
     //$('LI').css('color','red'); 
     //are called inside the focus event 
     //this functions could be anywhere and I don't need to know them prior to the ajax load   
     $(document).on("myLoaded","li", function(){    
      $(this).css('color','red'); 
     }); //(note 1) 

     //Trigger the custom event once to paint red the first element 
     $('LI').trigger('myLoaded'); //(note 2) 
    }); 
</script> 
</head> 
<body> 
<ol id="test"><li>click</li></ol> 
</body>

你可以在這裏試試。

http://jsfiddle.net/THHNS/33/

@charlietfl建議，一個可能鏈中（注1）鏈接的聲明（註釋2）觸發，但我一直無法使它發揮作用。我敢肯定它可以用更少的線條來完成。但我想這個解決方案將足以讓我的代碼組織在一個頁面完整的ajax加載項目我正在工作。

謝謝大家！

來源

2012-06-25 11:49:43

定義一個類不是更好嗎？

.myredclass {color: red;}

，並將其添加在創建李時珍的：

$('#test').append('<li class=\"myredclass\">click</li>');

我打賭它會更快速。

很明顯，這取決於你的CSS樣式的動態必須是多麼的動態（如果你想爲每個LI設置一個不同的x偏移量，這不是一個可行的選擇，但是對於簡單和一致的拼圖你可以這樣做）。

來源

2012-06-25 08:46:27 Cranio

請，顱，請你仔細閱讀這個問題之前* *給一個答案？正如我所說的： //這只是一個例子，我並不需要繪製文本紅色:) 什麼，我需要做的是不改變風格。這只是一個簡單的例子。謝謝。 –

我已經讀過你的問題**非常好**，@Hanoc，對於那些花時間幫助你的人來說，沒有必要站在無禮的邊緣。我想你還沒有考慮過有人可能理解「他不需要製作'color：red'，但可能*其他css轉換？」的可能性。順便說一句，我已經清楚地*在我的回答說，該解決方案將取決於如何「動」的變化將是，這一個簡單的CSS應用我的答案是確定的，複雜的和可變的任務（不同的CSS元素，但它可以擴展到各種類型的變化），事實並非如此。 – Cranio

對不起。我以爲你真的沒看完我的全文，因爲我認爲我的解釋就夠了。這不是我的錯。（我以前的道歉已經丟失，我希望我不會轉貼他們） –

這不會解決你所有的困境，但一旦你創建自定義事件，您還可以立即觸發它在同一鏈讓您的激活頁面加載和準備使用的插件做一個簡單的設置在阿賈克斯成功

$('OL').delegate("li","load",function(){ 
     $(this).css('color','red'); 
    }).trigger('load');

來源

2012-06-25 09:39:49 charlietfl

這比我的解決方案更清潔。我開始認爲我所尋求的解決方案並不存在，但在批准您的答案之前，我會稍微等一下。無論如何，我不能因缺乏聲譽而投票贊成！ –

嘗試設置不同的「操作」，您可以將其從單擊事件傳遞給主AJAX調用函數，然後再傳遞給主AJAX成功函數。 2個PARAMS同樣的作用和whatGetsChanged你能在主AJAX處理功能組織的相當多，添加的，涉及到每一筆交易 – charlietfl

典型CRUD操作的列表可以開始分支代碼頗有幾分'當然，其它的數據之間{行動：'編輯'，whatToChange：'myTable'，dataToServer：{....}}'。我這樣做是在沉重的AJAX頁面所有事件處理程序，並通過他們掌握AJAX的處理程序，它採用主回調處理程序儘可能 – charlietfl

你可以這樣做：

<head> 
    <script type="text/javascript"> 
     $(function() { 
      $(document).on("click","li", function(){ 
       $('#test li:first-child').clone().appendTo('#test'); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<ol id="test"><li style="color:red">click</li></ol> 
</body>

來源

2012-06-25 11:22:45 Mauro

它適用於該示例，但在我的情況下不起作用。我需要加載動態內容，而不僅僅是重複。反正好橫向思維！謝謝！ –

委託附加在一個非事件

回答

相關問題