jQuery 在不同情况下选择事物时遇到困难

Question

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

大家好！

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

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

因此，当我的列表生成时，就会输出此代码。我们将 CodeIgniter PHP 与 jQuery 一起使用 - 这是在数据库结果循环中。 $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[...] ，然后

那么，jQuery 应该不会有任何问题，对吗？在我们开始对 ID 进行 Base62 编码之前，一切都工作正常。 我相信当我们的 ID 包含大写字母时，jQuery 不能/不会选择它们。

如果我错了，请原谅我 - 相对而言，我对 jQuery 相当陌生 - 但为了测试我的观点，我将 $this->basecrypt->encode() 更改为 Base36。 之前，它使用的是 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 之后，它使用 0123456789abcdefghijklmnopqrstuvwxyz

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

那么我能做什么？我继续使用 Base36 中的数字和小写字母是否安全 - 如果是，那么最大整数大小是多少？如果没有，我该如何处理 jQuery 有问题的选择过程？

谢谢！

Jack

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

这是 ajaxlist.php 文件中返回的脚本的一部分 - 它是从 Ajax 调用的，并在页面加载后几秒钟出现。我在开头附近添加了 alert("clicked"); ，看看是否会出现 - 遗憾的是，它没有...... $(document).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:< /strong> 返回到浏览器的实际输出

这是从 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

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

$('#container-of-the-divs div[id^=title-]').click(function(e) {
    alert('Clicked div with ID: ' + e.target.id);
});

您也可以向这些元素添加一个类并选择它。如果您正在寻找大量项目的性能，您还可以将单击事件添加到父项目上，然后在其中执行 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 2

为什么

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

包含两个id？

Answer 3

我不认为 jQuery 是问题所在。

请仔细检查您生成的 ID 对于页面来说是唯一的并且符合 ID 令牌的定义：

ID 和 NAME 令牌必须以字母 ([A-Za-z]) 开头，并且后面可以跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_")、冒号 (":") 和句点 (".")。

还要对输出的 HTML 进行有效性测试，以确保您的 HTML 在您没有查看的地方没有损坏。

Answer 4

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

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

我还必须添加 return false; 这样演示就不会尝试点击链接