Question

注意：如果你只是一个jQuery开发人员，这篇文章中的一些内容可能看起来有点复杂（Base62编码等） - 实际上并非如此。虽然更多技术细节与问题相关，但核心是jQuery不会选择带有大写字母的东西。谢谢！的

嗨伙计们！

所以我有一个由Ajax生成的列表。单击列表标题时，将发送其ID，并且列表项将显示在其旁边。标准的东西。

由于我们使用的是auto_increment ID，因此我们不希望用户知道数据库中有多少提交内容。所以，我将它编码到Base62，然后再解码。 [请注意，这是 - 或者应该，与问题无关]。

因此，在生成列表时，输出此代码。我们在jQuery旁边使用CodeIgniter PHP - 这是在数据库结果的循环中。 $this->basecrypt->encode()是一个简单的CI库，用于将整数（ID）转换为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-ID之前，一切正常。 我认为jQuery在包含大写字母时不能/不会选择我们的ID。

现在请原谅我，如果我错了 - 相对来说，我对jQuery很新 - 但为了测试我的观点，我将$this->basecrypt->encode()改为Base36。之前，它正在使用0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 之后，它正在使用0123456789abcdefghijklmnopqrstuvwxyz

没有大写字母，jQuery可以选择（并出于测试目的显示警报）。

那我该怎么办？在Base36中继续使用数字和小写字母是否安全 - 如果是这样，那么最大整数大小是多少？如果没有，我可以做些什么来解决jQuery有问题的选择过程？

谢谢！

杰克

编辑：下面是页面中的一些示例代码。

这是文件ajaxlist.php中返回的脚本的一部分 - 它是从Ajax调用的，并在页面加载后几秒钟出现。我在alert("clicked");附近添加了$('#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>，看看是否会出现 - 遗憾的是，它不会...... $（document）.ready（function（）{

<div class="result">

    <div class="resulttext">

        <div id="title-<?php echo $this->basecrypt->encode($row->codeid);?>" class="title">
            <?php echo anchor('#',$row->codetitle); ?>
        </div>   [.......]

同样从同一个文件返回，同时上面的代码（就在它下面）就是这样：

    <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>

如果这有帮助了，请告诉我！

编辑2：返回浏览器的实际输出。

这是从Firebug获取的，是返回给浏览器的数据（Ajax）：

{{1}}

来吧 - 你不能说不应该工作......你能吗？！

Answer 1

好的我发现了你的问题......你需要在form_data定义（demo）中的变量周围加上引号：

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

我还必须添加return false;，因此演示不会尝试按照链接

Answer 2

我认为jQuery不是问题所在。

请仔细检查您生成的ID是否为页面所独有且符合definition of ID tokens：

ID 和 NAME 令牌必须以字母（[A-Za-z]）开头，后跟任意数字字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句号（“。”）。

同时执行validity test of your output HTML以确保您的HTML不会在您不看的地方被破坏。

Answer 3

为什么

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

包含两个ID？

Answer 4

这并不能解决您的具体问题，但您不能只做这样的事情：

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

jQuery在不同情况下选择东西时遇到问题

4 个答案: