首頁猿問單擊后無法追加子項

單擊后無法追加子項

JavaScript

侃侃爾雅 2023-09-21 10:40:42

這是我的JS$('.data').click(function(){ var datacontent = $(this).attr('data-content'); $(this).parent().html('').append(` <div class="wrap"> <p>${data[datacontent].content}</p> <div class="data" data-content="0">data 1</div> <div class="data" data-content="1">data 2</div> </div> ` });我的完整代碼：var data = [{ "content": "first content" }, { "content": "second content" }];$('.data').click(function() { var datacontent = $(this).attr('data-content'); //alert (datacontent) $(this).parent().html('').append(` <div class="wrap"> <p>${data[datacontent].content}</p> <div class="data" data-content="0">data 1</div> <div class="data" data-content="1">data 2</div> </div> `)});.data { background: tomato; color: white; padding: 8px; display: inline; cursor: pointer;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrap"> <p> Hi, Please click data </p> <div class="data" data-content="0">data 1</div> <div class="data" data-content="1">data 2</div></div>我無法點擊數據2我在附錄中添加了之前的 HTML (<div class="data" data-content="0">和)。<div class="data" data-content="1">有辦法解決我的問題嗎？謝謝

查看完整描述

2 回答

郎朗坤

TA貢獻1921條經驗獲得超9個贊

您要替換.data附加了事件處理程序的元素。

如果你只是寫入<p>而不是重寫整個 DIV 會更好。

var data = [{

? ? "content": "first content"

? },

? {

? ? "content": "second content"

? }

];

$('.data').click(function() {

? var datacontent = $(this).data('content');

? //alert (datacontent)??

? $(this).siblings("p").text(data[datacontent].content)

});

.data {

? background: tomato;

? color: white;

? padding: 8px;

? display: inline;

? cursor: pointer;

}

? <p>

? ? Hi, Please click data

? </p>

? <div class="data" data-content="0">data 1</div>

? <div class="data" data-content="1">data 2</div>

</div>

反對回復 2023-09-21

小唯快跑啊

TA貢獻1863條經驗獲得超2個贊

請嘗試

var data = [{

"content": "first content"

{

"content": "second content"

}

];

//$('.data').click(function() {

$(document).on('click','.data', function(){

var datacontent = $(this).attr('data-content');

//alert (datacontent)

$(this).parent().html('').append(`

<p>${data[datacontent].content}</p>

</div>

});

反對回復 2023-09-21

隔江千里

TA貢獻1906條經驗獲得超10個贊

您不需要替換整個 html 代碼，只需替換同級p標簽即可。

var data = [{

"content": "first content"

{

"content": "second content"

}

];

$('.data').on('click', function(e) {

var datacontent = $(this).attr('data-content');

$(this).siblings("p").html(data[datacontent].content)

});

.data {

background: tomato;

color: white;

padding: 8px;

display: inline;

cursor: pointer;

}

<p>

Hi, Please click data

</p>

</div>

反對回復 2023-09-21

2 回答
0 關注
151 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

單擊后無法追加子項

單擊后無法追加子項

2 回答

添加回答