iT邦幫忙

0

JQUERY 使用 $.ajax 產生的內容無法click??

JQUERY 使用 $.ajax 產生的網頁內容

			<div class='basic-modal1'>
				<a href="#" class='basic1' >評論(<span class="ShowMe_TheFriend_commentNumber">200</span>)</a>
			</div>

我利用以下的程式碼 click??

$().ready(function(){
	$('.basic-modal .basic').click(function (e) {
		
			alert("231");

		});


 });

如果我改成以下

<a href="#" class='basic1' onclick='ShowMe_TheFriend_comment()'>

就可以用

function ShowMe_TheFriend_comment() {


alert("123123");


}

我已經測試過這個問題...請問各位大大要怎麼解決??!

6
logoooit
iT邦新手 4 級 ‧ 2010-09-25 14:59:37
最佳解答

如果有發生這種情況,可以多多利用 .live()

這玩意是為了這種情況而開發的功能

看更多先前的回應...收起先前的回應...

.live()這個我試了...如果是id的話.可以用
但如果是class.我點選其中一個.就不可以.
應該是我還沒掌握到技巧

logoooit iT邦新手 4 級 ‧ 2010-09-25 19:55:53 檢舉

先更新你的 jQuery 到 1.4 或 改變寫法。

我使用的是 jquery-1.4.2.min.js

改成這樣可以了..現在要測試怎麼傳參數進去

<pre class="c" name="code">$('.basic-modal > .basic').live("click", function(){
		ShowMe_TheFriend_comment1("11");
		 $(this).after("<p>OK!</p>");
	});
8
fillano
iT邦超人 1 級 ‧ 2010-09-12 01:28:46
<pre class="c" name="code">$().ready(function(){  
    $('.basic-modal .basic').click(function (e) {  
          
            alert("231");  
  
        });  
  
  
 }

沒有 '.basic' 這個class耶?還是你貼錯?

看更多先前的回應...收起先前的回應...

更正是...不好意思..測到頭暈了
$('.basic-modal1 .basic1').click(function (e)

fillano iT邦超人 1 級 ‧ 2010-09-12 08:18:19 檢舉

$.ajax產生的內容?你程式怎麼寫的?

fillano iT邦超人 1 級 ‧ 2010-09-12 08:35:46 檢舉

如果你要讓動態產生的內容也能動態加上事件處理,你應該事先設計好他的selector規則,然後用.live()來bind事件,這樣可以讓jquery自動替你處理。請參閱:

http://api.jquery.com/live/

處理動態內容常會有一個陷阱,就是網頁內容render的速度比javascript慢,所以你不能用「同步」的方式來處理。比較簡單的方法是,透過setTimeout來呼叫處理動態內容的函數。用這樣「非同步」的方式來處理動態內容比較保險。

另外補充一下,Javascript的「非同步」處理方法是基於一個queue模型,這是相當關鍵但是也很多人不清楚的知識。建議可以看一下John Resig的文章:
http://ejohn.org/blog/how-javascript-timers-work/
或是找Nicholas C. Zakas的High Performance Javascript來看看,google book上面有抽印本:
http://books.google.com.tw/books?id=ED6ph4WEIoQC&printsec=frontcover#v=onepage&q&f=false
你可以參考他第六章,寫得很詳細。

javascript是用這種方式..server那邊要列出嘛??

<pre class="c" name="code">//做測驗 將答案送到 server.然後列出相同作答的
function er_results_0(elem,ex_no) {
//alert($('#er_comment').val());
	
    $.ajax({
         url: 'server/server_index_test.php',
         cache: false,
         dataType: 'html',
             type:'GET',
         data: { par1: ex_no ,par2: $('input[name=er_results]:checked').val() ,par3: $('#er_comment').val() ,mem_no: '2010090200005' , mem_cookie: 'C2010091300006' },
         error: function(xhr) {
           alert('Ajax request 發生錯誤');
         },
         success: function(response) {
                   $('#friend_function_mainArea').html(response);
           $('#friend_function_mainArea').fadeIn();
         }
     });	
	 
	clear_results_2(); 
	
	return false;
}
fillano iT邦超人 1 級 ‧ 2010-09-16 09:09:28 檢舉

所以你的意思是說:

<pre class="c" name="code">
         success: function(response) {
                   $('#friend_function_mainArea').html(response);
                   $('#friend_function_mainArea').fadeIn();
         }

這一段程式產生的內容,對產生前bind的事件沒反應?這樣你就你先用live試試看吧。

eric19740521提到:
.live()這個我試了...如果是id的話.可以用
但如果是class.我點選其中一個.就不可以.
應該是我還沒掌握到技巧

.live()這個我試了...如果是id的話.可以用
但如果是class.我點選其中一個.就不可以.
應該是我還沒掌握到技巧

fillano iT邦超人 1 級 ‧ 2010-09-28 15:07:20 檢舉

live有一些限制,就是盡量不要bind跟live混用。你把程式貼上來看一下吧。

最近剛好有朋友花了些時間研究jquery跟dom的事件處理:
http://blog.hinablue.me/869

也許可以參考看看。

<pre class="c" name="code">
$('.basic-modal > .basic').live("click", function(){  
        ShowMe_TheFriend_comment1("11");  
         $(this).after("<p>OK!</p>");  
    });  

我改成這樣子可以 作用了...可是為何要加上 Child Selector (“parent > child”)

難道不能 .basic-modal .basic

fillano iT邦超人 1 級 ‧ 2010-09-30 18:19:12 檢舉

疑?不過parent child selector找到的是direct child...,條件比較嚴格耶?

您的html node架構不知道怎樣?

8
aqr199
iT邦新手 2 級 ‧ 2010-09-13 09:17:02

解法一:雖然在span上bind click, 但也會同時引發a的click事件, 有發生靈異事件的可能

<pre class="c" name="code">
var v = $("<div class='basic-modal1'><a href='#' class='basic1' >評論(<span class='ShowMe_TheFriend_commentNumber'>200</span>)</a></div>");

$(document.body).append(v);

setTimeout(function () {
    $('.ShowMe_TheFriend_commentNumber').click(function () {
        alert('231');
    });
},100);

解法二:只抓資料回來, 其他自己產生

<pre class="c" name="code">
var v =200;
$(document.body).append(
    $('<div />').addClass('basic-modal1').append(
	    $('<a />').addClass('basic1').click(function () {
                alert('231');
        }).html('評論(<span class="ShowMe_TheFriend_commentNumber">'+v+'</span>)')
    )
);

我用$.ajax 改寫網頁內容.這個不太合適.他要做的細部功夫太多了...謝謝你的意見

8
simon88
iT邦研究生 3 級 ‧ 2010-09-13 10:06:32

用白話解釋一次
當你網頁第一次載入完成載入所有的dom,它都可以立即被bind事件
但是用ajax產生新的dom並沒有沒『交代任務』到,所以沒有『被觸發的機會』,

但是你在a上用onclick去呼叫function做也是可以避免上面情形,
如果你不想這樣子做,那就再想辦法讓一樣的語法執行一次,

<pre class="c" name="code">
$('.basic-modal .basic').click(function (e) {  
            alert("231");  
});  

方法有很多種,上面其他人有提供了一些

8
charles1021
iT邦新手 5 級 ‧ 2010-09-13 16:57:33

你的問題是說 <a> 標籤 click 時, 是無法作用的嗎?

感覺上, 這是很簡單的問題

&lt;pre class="c" name="code">$('.basic-modal .basic').click(function (e) {    
            alert("231");    
});  

改成

&lt;pre class="c" name="code">$('.basic-modal > .basic').click(function (e) {    
            //只是在 className之間加入一個箭頭方向而已, 你試試吧, 可以要記得回覆
            alert("231");    
});  

你問的似乎是這個問題吧.....
Child Selector (“parent > child”)
http://api.jquery.com/child-selector/

&lt;pre class="c" name="code">$('.basic-modal > .basic').live("click", function(){
		ShowMe_TheFriend_comment1("11");
		 $(this).after("&lt;p>OK!&lt;/p>");
	});

我改成這樣子可以 作用了...可是為何要加上 Child Selector (“parent > child”)

難道不能 .basic-modal .basic

大家好, 去年(2010)10月我跑去當兵了, 直到這次放年假才回來看。

隔了快4個月大家應該功力都大增了吧。

我沒試過 .basic-modal .basic 這樣的寫法 ^_^
所以我們還是遵守他們的規則來做吧~~~~

6
hhqqnu
iT邦新手 4 級 ‧ 2010-09-16 08:32:37

basic

选择器自己再看看

我要發表回答

立即登入回答