jQuery не может выбрать вещи в разных случаях
Примечание: если вы "всего лишь" разработчик jQuery, некоторые вещи в этом посте могут выглядеть немного сложнее (кодировка Base62 и т. Д.) - на самом деле это не так. Хотя более технические детали имеют отношение к вопросу, суть в том, что jQuery не будет выбирать вещи с заглавными буквами. Спасибо!
Привет народ!
Итак, у меня есть список, сгенерированный Ajax. Когда вы нажимаете на заголовок списка, его идентификатор отправляется, и рядом с ним появляется элемент списка. Стандартные вещи.
Поскольку мы используем идентификатор auto_increment, мы не хотим, чтобы пользователи знали, сколько отправлений в базе данных. Итак, я кодирую его в Base62, затем снова декодирую. [Обратите внимание, что это - или, должно быть, не имеет отношения к проблеме].
Так как мой список генерируется, этот код выводится. Мы используем CodeIgniter PHP вместе с jQuery - это в цикле результатов базы данных. $this->basecrypt->encode() простая библиотека CI для преобразования целого числа (идентификатора) в Base62:
$('#title-<?php echo $this->basecrypt->encode($row->codeid); ?>').click(function() {
alert("clicked");
[...]
А затем, далее вниз по странице:
<div id="title-<?php echo $this->basecrypt->encode($row->codeid);?>" class="title">
Как вы можете видеть, все это генерируется в одном цикле - и просмотр выводимого исходного кода показывает, например:
$('#title-1T').click[...] а потом <div id="title-1T" [...]
Итак, у jQuery не должно быть проблем, верно? Все работало нормально, пока мы не начали Base62-идентификацию. Я считаю, что jQuery не может / не будет выбирать наши идентификаторы, если они содержат заглавные буквы.
Теперь прости меня, если я ошибаюсь - я, собственно говоря, довольно плохо знаком с jQuery - но чтобы проверить свою точку зрения, я изменил свой $this->basecrypt->encode() в базу36. Раньше он использовал 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ После того, как он использовал 0123456789abcdefghijklmnopqrstuvwxyz
Без заглавных букв jQuery мог выбрать (и показать предупреждение для целей тестирования) просто отлично.
Так что я могу сделать? Безопасно ли для меня продолжать использовать только цифры и строчные буквы в Base36 - и если да, то каков максимальный целочисленный размер, до которого это может доходить? Если нет, что я могу сделать с проблемным процессом выбора в jQuery?
Спасибо!
Джек
РЕДАКТИРОВАТЬ: Ниже приведен пример кода со страницы.
Это часть скрипта, возвращенного в файле ajaxlist.php - он вызывается из Ajax и появляется через пару секунд после загрузки страницы. Я добавил в alert("clicked"); прямо в начале, чтобы увидеть, если это появится - к сожалению, это не...
$(документ).ready(function() {
$('#title-<?php echo $this->basecrypt->encode($row->codeid); ?>').click(function() {
alert("clicked");
var form_data = {
id: <?php echo $this->basecrypt->encode($row->codeid); ?>
};
$('.resultselected').removeClass('resultselected');
$(this).parent().parent().addClass('resultselected');
$('#col3').fadeOut('slow', function() {
$.ajax({
url: "<?php echo site_url('code/viewajax');?>",
type: 'POST',
data: form_data,
success: function(msg) {
$('#col3').html(msg);
$('#col3').fadeIn('fast');
}
});
});
});
});
</script>
Также возвращается из того же файла, в то же время, что и код выше (чуть ниже):
<div class="result">
<div class="resulttext">
<div id="title-<?php echo $this->basecrypt->encode($row->codeid);?>" class="title">
<?php echo anchor('#',$row->codetitle); ?>
</div> [.......]
Если это поможет, дайте мне знать!
РЕДАКТИРОВАНИЕ 2: РЕАЛЬНЫЙ ВЫХОД, ВОЗВРАЩЕННЫЙ БРАУЗЕРУ.
Это было взято из Firebug и возвращает данные (Ajax) в браузер:
<script type="text/javascript">
$(document).ready(function() {
$('#title-1T').click(function() {
alert("clicked");
var form_data = {
id: 1T };
$('.resultselected').removeClass('resultselected');
$(this).parent().parent().addClass('resultselected');
$('#col3').fadeOut('slow', function() {
$.ajax({
url: "http://localhost:8888/code/viewajax",
type: 'POST',
data: form_data,
success: function(msg) {
$('#col3').html(msg);
$('#col3').fadeIn('fast');
}
});
});
});
});
</script>
<div class="result">
<div class="resulttext">
<div id="title-1T" class="title">
<a href="http://localhost:8888/#"><p>This is an example </p></a> </div>`
<div class="summary">
gibberish summary text </div>
<div class="bottom">
<div class="author">
by <a href="http://localhost:8888/user/7/author">author</a> </div>
<div class="tagbuttoncontainer">
<div class="tagbutton listv">
<span>tag1</span>
</div>
</div>
<!-- Now insert the rating system -->
<div class="ratingswrapper">
<p>4.0</p>
</div>
</div>
</div>
</div>
Давай - ты не можешь сказать, что это не должно работать... не так ли?!
4 ответа
Хорошо, я нашел вашу проблему... вам нужно поместить кавычки вокруг переменной в определении form_data ( демо):
var form_data = {
id: "<?php echo $this->basecrypt->encode($row->codeid); ?>"
};
Я также должен был добавить return false; поэтому демо не пытается перейти по ссылке
Я не думаю, что проблема в jQuery.
Пожалуйста, проверьте, чтобы идентификаторы, которые вы генерируете, были уникальными для данной страницы и соответствовали определению токенов идентификаторов:
IDа такжеNAMEтокены должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркиваний ("_"), двоеточий (":") и точки (".").
Также сделайте проверку достоверности вашего выходного HTML, чтобы убедиться, что ваш HTML не поврежден в местах, где вы не смотрели.
Это не решит вашу конкретную проблему, но вы не могли бы просто сделать что-то вроде этого:
$('#container-of-the-divs div[id^=title-]').click(function(e) {
alert('Clicked div with ID: ' + e.target.id);
});
Вы также можете просто добавить класс к этим элементам и выбрать его вместо этого. Если вы ищете производительность с огромным количеством элементов, вы также можете добавить событие click к родительскому элементу, а затем выполнить оператор if, внутри которого будет создан только один прослушиватель событий вместо N прослушивателей событий. Пример:
$('#container-of-the-divs').click(function(e) {
if (e.target.id.substring(0, 6) == 'title-') {
alert('Clicked div with ID: ' + e.target.id);
}
});
Или вы можете просто проверить, если $(e.target).hasClass(), как упоминалось ранее.
Обновлено: вот рабочий пример, основанный на коде, который вы дали:
<div class="result">
<div class="resulttext">
<div id="title-A0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" class="title">
<a href="#">A0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
</div>
<div id="title-B0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" class="title">
<a href="#">B0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
</div>
<div id="title-C0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" class="title">
<a href="#">C0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
</div>
<div id="title-D0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" class="title">
<a href="#">D0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$('div.resulttext div.title').click(function() {
$i = $(this);
alert('Clicked div with ID: ' + $i.attr('id'));
});
</script>
Почему
<div id="title" id="1T" [...]
содержать два идентификатора?