使用jQuery查找（）方法時未定義的錯誤

每次當它由循環更改時，我都想使用下面的代碼獲取值，但是出現「未定義」錯誤。使用jQuery查找（）方法時未定義的錯誤

@foreach($items as $item) 
    <li class="list-group-item ourItem" data-toggle="modal" data-target="#myModal">{{$item->item}}</li> 
    <input type="hidden" id="itemId" value="{{$item->id}}"/> 
@endforeach 

$(document).on("click", ".ourItem", function(event) { 
    var text = $(this).text(); 
    var id = $(this).find('#itemId').val(); 
    $('#addItem').val(text); 
    $('#modelTile').text("Edit Item"); 
    $('#delete').show('400'); 
    $('#saveChange').show('400'); 
    $('#addItemBtn').hide("400"); 
    $('#id').val(id); 
    console.log(id); 
});

來源

2017-06-12 Sharifur Robin

僅查找發現後裔。 itemId不是ourItem的子項。 – AtheistP3ace

首先，您正在重複使用'itemId'作爲多個輸入元素。 ID在文檔中必須是唯一的。另外，還不清楚其他元素在哪裏，比如'＃addItem'和'＃modelTile'。你的標記在哪裏？ p/s：始終發佈您的標記的**呈現**版本。 – Terry

–

-1

如果我理解正確的話一般的邏輯，這應該工作。試試這個

var id = $(this).next('input').val();

取而代之的是

var id = $(this).find('#itemId').val();

來源

2017-06-12 20:13:33 arnuga3

感謝。它工作 –

很高興幫助find（）適用於子元素，所以你可以在你的情況下使用next（）或者兄弟（）（） – arnuga3

儘管這個解決方案有效，但我建議提及標記（HTML）應該被修復以便避免讓多個節點具有相同的'itemId' ** id **（也許這個解決方案不再需要） – Paolo

-1

變化

var id = $(this).find('#itemId').val();

爲

var id = $('#itemId').val();

來源

2017-06-12 20:06:59

不起作用請在這裏檢查代碼 http://imgur.com/a/uU25h –

你得到的「錯誤」是id是undefined因爲jQuery的find()無法找到的元素。

這是因爲按照AtheistP3ace的評論

find()只能找到後裔。 itemId不是ourItem的子項。

據說......

首先，讓<input>節點是<li>元素的子元素。

@foreach($items as $item) 
    <li class="list-group-item ourItem" data-toggle="modal" data-target="#myModal">{{$item->item}} 
     <input type="hidden" class="item-value" value="{{$item->id}}"/> 
    </li> 
@endforeach

然後你不能有相同的HTML ID許多節點，而不是隻給<input>節點類，目的是找到他們被點擊的父元素時。

在類上面的片段是item-value而ID被去除。

最後JavaScript的部分是固定的

var id = $(this).find('.item-value').val();

整個JS變爲：

$(document).on("click", ".ourItem", function(event) { 
    var text = $(this).text(); 
    var id = $(this).find('.item-value').val(); // <--- fixed here 
    $('#addItem').val(text); 
    $('#modelTile').text("Edit Item"); 
    $('#delete').show('400'); 
    $('#saveChange').show('400'); 
    $('#addItemBtn').hide("400"); 
    $('#id').val(id); 
    console.log(id); 
});

來源

2017-06-12 20:25:38 Paolo

使用jQuery查找（）方法時未定義的錯誤

ADD ITEM

回答

相關問題