2012-06-28 2 views
12

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

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

Вот мой код 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»? – gdoron

+0

Мне нужно это сделать другими способами –

+0

ii даст вам идентификатор всех элементов, соответствующих этому селектору. используйте «каждый» – speedingdeer

ответ

17

Я не уверен, почему вы используете $ .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)); 
+0

Как мой комментарий выше: зачем использовать jQuery для получения идентификатора элемента? и вам не хватает точки перед селектором состояния. – gdoron

+0

, потому что это то, что он делает. – digitaldreamer

+1

ummm. Вы должны исправить его код, а не копировать его.:) – gdoron

2

Как насчет:

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

ли это работать только для дивы с классом status ? Если это так, попробуйте:

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

um Я не спустил вниз, но 'div.status 'будет работать как селектор. –

+0

Да, это, вероятно, было бы чище, спасибо. – woemler

+0

Теперь у него другая ошибка, теперь он ищет узлы внутри div со статусом. Вы похожи на jQuery? – gdoron

1

использование 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/

+0

Большое спасибо :) –

+0

ПРИМЕЧАНИЕ: вы можете использовать 'var status = event.target.id;', но я следовал за вашим кодом в этой части. –

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

Объяснение PROXY выпуска:

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

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

0

Я пытаюсь отобразить скрытый 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++; 
     }  
     } 
0
<!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> 
Смежные вопросы