Как использовать jQuery для получения идентификатора div, на который был нажат?

Мне нужно получить идентификатор отложенного div.

Теперь, когда я нажимаю на класс статуса I, возвращается undefined id.

Вот мой код javascript

jQuery(document).ready(function() {
    $(".status").bind('click', $.proxy(function() {
        var status = $(this).attr('id');
        alert(status);
    }, this));
});​

и HTML

<div class="status" id="s_1">111111</div>
<div class="status" id="s_3">33333</div>
<div class="status" id="s_2">222222</div>

Как мне получить правильное значение id?

Ответы

Ответ 1

Я не уверен, почему вы используете $.proxy. Удаление его должно дать вам желаемые результаты.

$('.status').click(function(event) {
    var status = $(this).attr('id');
});

Если вы все еще хотите использовать прокси-сервер, вы можете получить доступ к элементу с щелчком через event.currentTarget

$(".status").bind('click', $.proxy(function(event) {
    var status = $(event.currentTarget).attr('id');
    alert(status);
}, this));

Ответ 2

Как насчет:

$('div').on('click', function(){
    alert($(this).attr("id"));
});

Должно ли это работать только для div с классом status? Если да, попробуйте:

$('div.status').on('click', function(){
    alert($(this).attr("id"));
});

Ответ 3

используйте event.target для ссылки на этот элемент

jQuery(document).ready(function() {
        $(".status").bind('click', $.proxy(function(event) {
            var status = $(event.target).attr('id');
          alert(status);
    }, this));
});

см. в действии: http://jsfiddle.net/vNaqR/

Ответ 4

$('selector').each(function(){
    $(this).click(function(){
        alert($(this).attr('id'))
    });
});

Ответ 5

Объяснение проблемы PROXY:

Будьте осторожны, используя $.proxy(). Он вызывает функцию (здесь параметр 1), используя указанный контекст (здесь параметр 2) вместо использования контекста, в котором запускается событие.

В главном вопросе указанным контекстом является $(document). Таким образом, функция пытается получить идентификатор документа вместо идентификатора объекта, на котором запускается событие (элемент $('. Status')).

Ответ 6

Я пытаюсь отобразить скрытый div, когда я нажимаю на кнопку, и каждый раз, когда пользователь нажимает кнопку, отображается больше индексов.

Это не работает, поскольку в списке всегда пусто, если я нахожусь в режиме добавления, не редактирую (отображает div при его редактировании)

                       <li>
                        <button type="button" name="addAnotherButton" class="btnFwd gradient smButtonStyling" 
                        onClick="showInput();">
                            <img src="/Common/web/static/images/add.png" class="smbtnIcon" />
                            Add Another 
                    </button>
                </li>

                <li>
                           <c:forEach items="${planInfoList}" var="planInfo" varStatus="status">
                        <div id="uploadBody[${status.index}]" style='display = none'>
                            <label class="adminFormLabel">Title:</label>
                            <form:input path="planInfoList[${status.index}].title" onfocus="this.select();" maxlength="50" size="30"/>
                            <label class="adminFormLabel">Plan Number:</label>
                            <form:input path="planInfoList[${status.index}].planNumber" size="10" maxlength="10"/>
                        </div>
                    </c:forEach>
                </li>

JS:

var found = 0;
    if ($('#uploadBody' + i).hide()) {
        for (var i = 0; i < 5; i++) {
            if (found == 0) {
                $('#uploadBody' + i).show();
            }
            found++;
        }       
        }

Ответ 7

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".divField").click(function(){
        alert("id : " + $(this).attr("id"));
    });

});
</script>
</head>
<body>
<h1>For finding id click below text</h1>
<div id="id1" value="Example 1" class="divField">My id is <b>id1</b></div>
<div id="id2" value="Example 2" class="divField">My id is <b>id2</b></div>

</body>
</html>