2015-07-02 7 views
0

Jquery показывает некоторые очень странное поведение в отношении доступа через пользовательские данные атрибутов

Вот HTML-

<div id="foo2" data-bar="bar" class="baz">some text</div> 

JQuery

$(document).ready(function() { 

    $("#mainPage").on("click", "[id^='foo']", doSomething); 

}); 


function doSomething(e) { 
    var bar = $(e.target).attr("data-bar"); 
} 

Это дает бар = не определено

Однако

function doSomething(e) { 
     e.target 
     var bar = $(e.target).attr("data-bar"); 
    } 

дает бар = "бар"

Я найти его крайне странно. На консоли отладки Chrome четко отображается набор данных или целевая ячейка bar: "bar", но без e.target он возвращает undefined. Это какая-то ошибка?

+0

использование $ (это) вместо $ (e.target) –

+1

попробовать это http://jsfiddle.net/suLufgyt/ и проверьте консоль – Sushil

+0

У меня нет никакого вывода на консоль , – AlyoshaKaramazov

ответ

1

Использование $(this) или $(e.target) работа. Является ли ваш foo div внутри элемента с id mainPage?

$(document).ready(function() { 
 

 
    $("#mainPage").on("click", "[id^='foo']", doSomething); 
 

 
}); 
 

 

 
function doSomething(e) { 
 
    console.log($(e.target).attr("data-bar")); 
 
    console.log($(this).attr('data-bar')); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<body id='mainPage'> 
 
<div id="foo2" data-bar="bar" class="baz">some text</div> 
 
    </body>

+0

Нет, $ (e.target) не работает. Как я уже сказал, консоль ясно показывает, что e имеет цель foo2 и что foo2 имеет набор данных с «баром», который хранится в баре, но он возвращается неопределенным, если я не таинственным образом размещаю e.target над ним. Да, он находится внутри div с id #mainPage. – AlyoshaKaramazov

+1

запустите фрагмент кода выше, щелкните по тексту и посмотрите на консоль, обе опции работают – depperm