iT邦幫忙

0

想請問如何替動態產生的元素綁定不一樣的資料?事件?

狀況大概是這樣
程式打開後根據資料庫裡的的資料產生一個li列表
這個列表的每個li都有標題、小標題
標題、小標題都是從資料庫裡面拿出來填進去的
這些都是動態產生在前端上的

下面是我大略的程式
有一個ID為myList的元素
所有動態產生的li都被append在myList底下
動態產生的li的ID都是"DC"

整個就是說當我長按父元素"myList"
觸發onHold
透過var hs=$("#DC");
取得我長按的那個元素(就是myList下的某一個li)
再從這個li上面的class去對資料做刪除(我把資料庫內的rowid綁定在元素的class上)
等於是我長按就會得到rowid然後根據rowid刪除資料

但是我現在長按就只能拿到第一個li的資料
按第二個也是只能拿到第一個li的資料
總之大概狀況是這樣

基本上就是我想把資料動態的綁定到元素上
然後可以取出元素裡的資料

var hold = document.getElementById("myList");
    ons.GestureDetector//是onsenui的功能 長按觸發
var onHold = ons.GestureDetector(hold).on("hold", function(event) {
					var hs=$("#DC");
					var hh=hs;
					console.log(hs[0]);
					//console.log(hh[0].classList[1]);
					var page = event.target;
					console.log(page);
					console.log("hold");
});

另外想請問一個元素可以不可以有兩個onclick阿

1
小魚
iT邦大師 1 級 ‧ 2019-06-23 23:26:19

你用id去綁定資料,
html不允許相同id,
即使有兩個id也只會有一個是有效的,
(基本上是前面那個)
看你是要用name或class去綁定,
或是每個都給不同的id,
但是產生的時候可以去取得id,
(用this.id或其他方式)
以下是個簡單的範例

<!DOCTYPE html>

<html> 
<head> 
	<meta charset="utf-8">
	<title>Test</title> 
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
</head> 
<body>
<input type="button" name="test" id="btn1" value="點我" />
<input type="button" name="test" id="btn2" value="點我" />
</body>
<script>
$("input[name=test]").click(function()
{
	console.log("id = ", this.id);
	alert(this.id);
});
</script>
</html> 

看起來你的事件好像是寫在父層,
可以改寫在li上面,
總之要用id抓元件必須每個元件都不同id才可以.

2
dragonH
iT邦大師 1 級 ‧ 2019-06-23 23:47:14

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

節錄 w3schools

所以不要把多個 dom 綁相同的id

你可以把 event listener 綁在 <li> 或者是 class 上

rowid 則可以用 data-* 的方式綁在 dom 上

codepen


兩個 onclick 的問題

你可能要舉個具體的例子

或許你一開始的出發點就是錯的也說不定

0
浩瀚星空
iT邦大師 1 級 ‧ 2019-06-24 13:34:45

其實,如果不是固定化事件的話。而是各別元件獨立事件。是可以在元件產生時單獨去綁定該元件的個別事件。只是很少人會這樣幹就是了。

這邊我會比較不明白的是,你是否有用了jquery做處理。
因為有看到了$("#??")的用法。但也可以看到javascript的document.getElementById用法。
讓我有點莫明奇妙。

以下是針對生成元件獨立綁定事件的基本應用寫法

var obj = $("<div></div>").click(function(){
   程式.....
});

如上面的做法,我生成了一個div物件。並綁定其物件一個click事件處理。

這樣子做,可以不需要額外id命名。但我上面只是生成元件。還沒將元件決定好要放置到哪邊。
這部份就得要自行放了。要不然只是一個有事件的空元件存在。

但如果事件本身並非很獨特性。一般會直接利用on特性來處理。
這邊有人有提到id不能重覆性。這是事實。
所以常用的方式會用class或是data屬性來決定要綁定的事件為何
如這是採用一個絕定性非動態產生的盒子來指定要on的對應事件

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).attr('name') );
  console.log( $( this ).text() );
});

上面會針對id=datatable內的tr做click事件。動態生成也是可以的。

我要發表回答

立即登入回答