iT邦幫忙

0

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

javascript php jquery
eric19740521 2010-09-12 00:18:07 ‧ 16144 瀏覽

  • 分享至 

  • xImage

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");


}

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

登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

6 個回答

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

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

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

看更多先前的回應...收起先前的回應...
eric19740521 iT邦新手 1 級 ‧ 2010-09-25 18:41:43 檢舉

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

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

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

eric19740521 iT邦新手 1 級 ‧ 2010-09-25 20:54:20 檢舉

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

eric19740521 iT邦新手 1 級 ‧ 2010-09-25 21:03:20 檢舉

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

<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耶？還是你貼錯？

看更多先前的回應...收起先前的回應...
eric19740521 iT邦新手 1 級 ‧ 2010-09-12 02:34:16 檢舉

更正是...不好意思..測到頭暈了
$('.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
你可以參考他第六章，寫得很詳細。

eric19740521 iT邦新手 1 級 ‧ 2010-09-14 00:14:03 檢舉

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 iT邦新手 1 級 ‧ 2010-09-25 18:42:20 檢舉

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

也許可以參考看看。

eric19740521 iT邦新手 1 級 ‧ 2010-09-30 01:05:27 檢舉 
<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>）')
    )
);
eric19740521 iT邦新手 1 級 ‧ 2010-09-25 21:04:53 檢舉

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

登入發表回應
8
賽門甜不辣
iT邦研究生 2 級 ‧ 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");    
});
charles1021 iT邦新手 5 級 ‧ 2010-09-13 16:59:39 檢舉

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

eric19740521 iT邦新手 1 級 ‧ 2010-09-25 21:02:28 檢舉 
&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

charles1021 iT邦新手 5 級 ‧ 2011-02-01 16:55:54 檢舉

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

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

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

登入發表回應
6
hhqqnu
iT邦新手 4 級 ‧ 2010-09-16 08:32:37

basic

选择器自己再看看

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙