web-dev-qa-db-ja.com

jqueryを使用してデータ属性にアクセスすると未定義が返されますか？

私のビューの中に次のようなボタンがあります：

<button data-assigned-id="@IdUser" onclick="updateClick()" type="button" class="btn btn-sm btn-default"></button>

私のdiv

<div id="partial_load_div">

</div>

脚本

function updateClick() {
    var id = $(this).data('assigned-id');
    $('#partial_load_div').show();
    $('#partial_load_div').load('/Users/UpdatePartial?id=' + id);
}

IDは常に未定義として表示され、チェックして@IdUserには常に価値があります

次にchrome devでエラーが発生しました

GET http：// localhost：19058/Users/UpdatePartial？id = undefined 400（Bad Request）

これを修正する方法はありますか？

jquerycustom-data-attribute
13
Maro

現在のスクリプトでは、$(this)はdata-属性を持たないWindowオブジェクト（ボタンではない）を参照するため、undefinedになります。

これを解決するには、要素を関数に渡します。

<button data-assigned-id="@IdUser" onclick="updateClick(this)" type="button" ... ></button>

function updateClick(element) {
    var id = $(element).data('assigned-id');
    ....

ただし、より良いアプローチは、動作でマークアップを汚染するのではなく、 nobtrusive Javascript を使用することです。

<button data-assigned-id="@IdUser" id="mybutton" type="button" class="btn btn-sm btn-default"></button>

$('#mybutton').click(function() {
    var id = $(this).data('assigned-id'); // $(this) refers to the button
    ....
});
6
user3559349

data()を使用してデータ属性を読み取るときは、_-_およびキャメルケース値を削除する必要があります。あなたが望んでいるのは：

_var id = $(this).data('assignedId');
_

data（）のドキュメント これを表示：

JQuery 1.4.3以降、HTML 5のデータ属性はjQueryのデータオブジェクトに自動的に取り込まれます。ダッシュが埋め込まれた属性の扱いは、jQuery 1.6で変更され、W3C HTML5仕様に準拠しました。

たとえば、次のHTMLがあるとします。

_<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
_

以下のjQueryコードはすべて機能します。

_$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
_

上記のコードの2番目のステートメントは、要素のdata-last-value属性を正しく参照しています。渡されたキーでデータが保存されていない場合、jQueryは要素の属性を検索し、キャメルケースの文字列を破線の文字列に変換してから、結果の前にデータを付加します。したがって、文字列lastValueはdata-last-valueに変換されます。

クリックイベントをバインドする方法に気付きませんでした。 $(this)を使用する場合は、jqueryを使用してイベントをバインドする必要があります。だからあなたは必要です：

_<button data-assigned-id="works" id="button">
clickme</button>

$(window).ready(function() {
     //bind the event using jquery not the onclick attribute of the button
     $('#button').on('click', updateClick);

});


function updateClick() {
    alert($(this).data('assignedId'));
}
_

作業フィドル

8
Liam