jQuery не может выбрать вещи в разных случаях

Question

Примечание: если вы «всего лишь» разработчик 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() на Base36. Раньше он использовал 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ После этого он использовал 0123456789abcdefghijklmnopqrstuvwxyz

Без заглавных букв jQuery может выбрать (и показать предупреждение для целей тестирования) просто отлично.

Так что я могу сделать? Безопасно ли для меня продолжать использовать только цифры и строчные буквы в Base36 - и если да, то к какому максимальному целочисленному размеру это может доходить? Если нет, что я могу сделать с проблемным процессом выбора в jQuery?

Спасибо!

Jack

РЕДАКТИРОВАТЬ: Ниже приведен пример кода со страницы.

Это часть скрипта, возвращенного в файле 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>

Давай - ты не можешь сказать, что это не должно работать ... не так ли? *

Answer 1

Хорошо, я нашел вашу проблему ... вам нужно поместить кавычки вокруг переменной в определении form_data ( demo ):

    var form_data = {
        id: "<?php echo $this->basecrypt->encode($row->codeid); ?>"
    };

Мне также пришлось добавить return false;, чтобы демо не пыталось перейти по ссылке

Answer 2

Я не думаю, что проблема в jQuery.

Пожалуйста, дважды проверьте, что генерируемые вами идентификаторы уникальны для страницы и соответствуют определению идентификаторов токенов :

ID и NAME токены должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисы ("-"), знаки подчеркивания ("_"), двоеточия (":") и точки (".").

Также выполните проверку правильности ваш вывод HTML , чтобы убедиться, что ваш HTML не сломан в местах, где вы не смотрели.

Answer 3

Это не решит вашу конкретную проблему, но вы не могли бы просто сделать что-то вроде этого:

$('#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>

Answer 4

Почему

<div id="title" id="1T" [...]

содержит два идентификатора?