jquery - jQuery 在不同情况下无法选择事物

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 应该没有任何问题，对吧？在我们开始对 ID 进行 Base62 处理之前，一切正常。我相信当 jQuery 包含大写字母时，它们不能/不会选择我们的 ID。

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

With no capital letters, jQuery could select (and show the alert for testing purposes) just fine.

So what can I do? Is it safe for me to continue just using numbers and lowcase letters, in Base36 - and if so, what's the maximum integer size this can go up to? If not, what can I do about jQuery's problematic selection process?

Thanks!

Jack

EDIT: Included below is some example code from the page.

This is a part of the script returned in the file ajaxlist.php - it's called from Ajax and appears a couple of seconds after the page loads. I added in alert("clicked"); right near the beginning to see if that would appear - sadly, it doesn't... $(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>

Also returned from the same file, at the same time as the code above (just beneath it) is this:

<div class="result">

    <div class="resulttext">

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

If this helps anymore, let me know!

EDIT 2: ACTUAL OUTPUT RETURNED TO THE BROWSER.

This was taken from Firebug, and is the returned data (Ajax) to the browser:

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

Come on - you cannot say that shouldn't work... can you?!

score 5 · Accepted Answer

Ok I found your problem... you need to put quotes around the variable in the form_data definition (demo):

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

I also had to add a return false; so the demo doesn't try to follow the link

score 2 · Accepted Answer

I don't think that jQuery is the problem.

Please double-check that the IDs you generate are unique to the page and conform to the definition of ID tokens:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Also do a validity test of your output HTML to make sure your HTML is not broken in places where you did not look.

score 1 · Accepted Answer

1

Why does

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

contain two ids?

于 2010-06-30T18:59:03.687 回答

score 1 · Accepted Answer

This doesn't solve your specific issue, but would couldn't you just do something like this:

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

You could also just add a class to these elements and select that instead. If you're looking for performance with a ton of items, you could also add the click event onto a parent item, and then do an if statement inside which would create only one event listener, instead of N event listeners. Example:

$('#container-of-the-divs').click(function(e) {
    if (e.target.id.substring(0, 6) == 'title-') {
        alert('Clicked div with ID: ' + e.target.id);
    }
});

Or you could just check if $(e.target).hasClass() like mentioned before.

Updated: Here is a working example based off the code you gave:

<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 - jQuery 在不同情况下无法选择事物

4 回答 4

Related

Reference