jquery 附加 div onclick 第一次不工作

Question

這是我的代碼

html：

<input type="text" class="js-input">  
<div class="js-autofill"></div>

jquery：

var myarray = ['apple' , 'orange'];
myarray.forEach(element => {
$('.js-autofill').append(
`<div class="js-item" data-value="`+element+`">` +element+ `</div>`
)
})

$(document).on('click','.js-item',function(){
$('.js-input').val($(this).attr('data-value'))
})

問題是.js-item onclick 第一次不工作 - 當我雙擊時它工作我找不到原因

Answer 1

您需要將.val()更改為.text()以進行 div 單擊。

來自文檔

.val()方法主要用於獲取表單元素的值，例如 input、select 和 textarea。 當在空集合上調用時，它返回未定義。

$('.js-input').val($(this).text())

2 - 您在 append 中的 div 字符串有不匹配的引號，正確的順序應該如下所示。

`<div class='js-item' data-value='` + element + `'>` + element + `</div>`

閱讀它也很有幫助： 我什么時候應該在 JavaScript 中使用雙引號或單引號？

---

下面的工作代碼

 var myarray = ['apple', 'orange']; myarray.forEach(element => { $('.js-autofill').append( `<div class='js-item' data-value='` + element + `'>` + element + `</div>` ) }) $(document).on('click', '.js-item', function() { $('.js-input').val($(this).text()) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="js-input"> <div class="js-autofill"></div>