Internet Explorer 只是不喜欢这个 jQuery 代码。 (Livequery 插件)

发布于 2024-07-29 16:11:34 字数 16712 浏览 9 评论 0原文

这是我目前正在构建的服装竞赛应用程序的代码。 将有一排单选按钮 1-10 包裹在标签中,所有这些都可以单独单击。 单击事件后,表单将提交,我会进行一些后处理并返回一个 json 对象,我将从该对象将发布数据注入到页面中。 此过程将一直持续到您为比赛中的每件服装投票为止。

Firefox、Safari、Camino 都按预期工作。 所有IE对container的翻转 = form.parents("#container"); javascript 行(随后使对容器的任何其他引用也失败。

值得注意的是,发现 form 变量很好。后续的alert(form[0].id); 确实按预期回显了costume_ rating_form。我是不确定何时无法使用 jquery 对象查找 #container 元素,

我怀疑 livequery 没有正确绑定到 IE 浏览器中的 click 事件。它?

$("form#costume_rating_form input[type=radio]").livequery("click",function(){
    form = $(this).parents("form:first");
    container = form.parents("#container");
    vote_eid = form.find("input#vote_eid");
    contest_results = container.find("#contest_results");
    contest_image = container.find(".contest_image:first");
    contest_next = container.find("#side_bar #next_up");
    contest_content = contest_image.next();
    .....

<div class="full center" id="container">
    <div class="s1-2" id="main">
        <div class="s_w clearfix">
            <div id="costume_rating">
                <h3 class="middle">
                    Rate This Costume
                </h3>
                <form action="/costume-rate/" method="post" id="costume_rating_form" name="costume_rating_form">
                    <label style="display: none;" for="costume_rating" class="error contest_selector">Please select a rating.</label>
                    <div id="rating_scores">
                        <!-- <div class="rate_tab radius_t_5">Rate This Costume</div> -->
                        <div class="thumb_down">
                            :-/
                        </div>
                        <div class="middle">
                            <label for="r1" class="contest_selector"><input type="radio" value="1" name="costume_rating" id="r1" class="radio" style="position: absolute; top: 0pt; right: 99999px;">1</label> <label for="r2" class="contest_selector"><input type="radio" value="2" name="costume_rating" id="r2" class="radio" style="position: absolute; top: 0pt; right: 99999px;">2</label> <label for="r3" class="contest_selector"><input type="radio" value="3" name="costume_rating" id="r3" class="radio" style="position: absolute; top: 0pt; right: 99999px;">3</label> <label for="r4" class="contest_selector"><input type="radio" value="4" name="costume_rating" id="r4" class="radio" style="position: absolute; top: 0pt; right: 99999px;">4</label> <label for="r5" class="contest_selector"><input type="radio" value="5" name="costume_rating" id="r5" class="radio" style="position: absolute; top: 0pt; right: 99999px;">5</label> <label for="r6" class="contest_selector"><input type="radio" value="6" name="costume_rating" id="r6" class="radio" style="position: absolute; top: 0pt; right: 99999px;">6</label> <label for="r7" class="contest_selector"><input type="radio" value="7" name="costume_rating" id="r7" class="radio" style="position: absolute; top: 0pt; right: 99999px;">7</label> <label for="r8" class="contest_selector"><input type="radio" value="8" name="costume_rating" id="r8" class="radio" style="position: absolute; top: 0pt; right: 99999px;">8</label> <label for="r9" class="contest_selector"><input type="radio" value="9" name="costume_rating" id="r9" class="radio" style="position: absolute; top: 0pt; right: 99999px;">9</label> <label for="r10" class="contest_selector"><input type="radio" value="10" name="costume_rating" id="r10" class="radio" style="position: absolute; top: 0pt; right: 99999px;">10</label> <input type="submit" value="Vote" name="submit" id="vote_button" class="submit" style="display: none;">
                        </div>
                        <div class="thumb_up">
                            8-D
                        </div>
                    </div><input type="hidden" value="4847" name="vote_eid" id="vote_eid"> <input type="hidden" value="23339" name="user_id"> <input type="hidden" value="105" name="contest_id">
                </form><br class="clear">
                <div class="contest_image">
                    <img src="/users/kylebradshaw-3161-full.gif" style="display: inline;">
                </div>
                <div class="contest_content">
                    <div class="contest_metar">
                        <table class="contest_meta">
                            <tbody>
                                <tr>
                                    <th>
                                        Title
                                    </th>
                                    <td>
                                        <b>hre's a title of the thing</b>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Description
                                    </th>
                                    <td>
                                        and here's an image of the thing
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Tags
                                    </th>
                                    <td>
                                        <a href="/tag/heres+a+tag/">heres a tag</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Submitted by
                                    </th>
                                    <td style="vertical-align: text-top;" class="submitted_by">
                                        <a href="/user/view/kylebradshaw/">kylebradshaw</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Share This
                                    </th>
                                    <td class="small">
                                        <input type="text" size="46" value="http://cz3.kb.mechmedia.com/costume-rate/4847/" style="padding: 1px; margin-bottom: 4px;" class="text select_box small"><br>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div><br class="clear">
                    <div id="commentary">
                        <h2>
                            Commentary
                        </h2>
                        <div id="entry_comments">
                            <p>
                                None yet! Leave a comment!
                            </p>
                        </div><!-- end entry_comments -->
                    </div>
                    <div id="comment_here">
                        <h2>
                            Be the first to comment!
                        </h2>
                        <form method="post" action="/update/">
                            <p>
                                <textarea style="width: 90%;" rows="2" name="comment">
                            </p><input type="hidden" value="4847" name="entry_id"><input type="hidden" value="105" name="contest_id"><input type="hidden" value="add_comment" name="action"><input type="hidden" value="html" name="content_type">
                            <p>
                                <input type="submit" value="Add Your Comment" name="submit">
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="s1-12" id="side_bar">
        <div class="s_w">
            <div id="next_up">
                <h3>
                    Next
                </h3>
                <div class="img_container">
                    <img alt="" src="/users/Crow_Nest_Vintage-2411-thumb.gif">
                </div>
                <div class="img_container">
                    <img alt="" src="/users/mizzmedusa-2155-thumb.gif">
                </div>
                <div class="img_container">
                    <img alt="" src="/users/tantlaymance-2053-thumb.gif">
                </div>
                <div class="img_container">
                    <img alt="" src="/users/gulfcoastdiesel-2024-thumb.gif">
                </div>
                <div class="img_container">
                    <img alt="" src="/users/PokeyWoman-1578-thumb.gif">
                </div>
            </div>
            <div id="new_up">
                <h3>
                    New
                </h3>
                <div class="img_container">
                    <a href="/costume-rate/4877/"><img alt="" src="/users/kylebradshaw-3197-thumb.gif"></a>
                </div>
                <div class="img_container">
                    <a href="/costume-rate/4874/"><img alt="" src="/users/kylebradshaw-3190-thumb.gif"></a>
                </div>
                <div class="img_container">
                    <a href="/costume-rate/4873/"><img alt="" src="/users/kylebradshaw-3189-thumb.gif"></a>
                </div>
                <div class="img_container">
                    <a href="/costume-rate/4872/"><img alt="" src="/users/kylebradshaw-3188-thumb.gif"></a>
                </div>
                <div class="img_container">
                    <a href="/costume-rate/4871/"><img alt="" src="/users/kylebradshaw-3185-thumb.gif"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="s5-12 end" id="pre_bar">
        <div class="s_w">
            <div id="contest_results">
                <h3>
                    <a href="/costume-rate/4848/">modal test</a> Voting Results
                </h3>
                <div class="contest_image left">
                    <img alt="modal test" src="/users/kylebradshaw-3162-full.gif">
                </div>
                <table class="contest_meta">
                    <tbody>
                        <tr>
                            <th>
                                Official Score
                            </th>
                            <td>
                                <span class="strong shout">6.0/10</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Votes
                            </th>
                            <td>
                                1 vote
                            </td>
                        </tr>
                        <tr>
                            <th>
                                You Voted
                            </th>
                            <td>
                                <b class="knock_out">6</b>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Submitted by
                            </th>
                            <td style="vertical-align: text-top;" class="submitted_by">
                                <a href="/user/view/kylebradshaw/">kylebradshaw</a>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Share This
                            </th>
                            <td class="small">
                                <input type="text" value="http://cz3.kb.mechmedia.com/costume-rate/4848/" style="padding: 1px; margin-bottom: 4px; width: 90%;" class="text select_box small"><br>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div><br class="clear">
            <br class="clear">
            <br class="clear">
            <div class="section first" id="contest_info">
                <h1>
                    <span class="costum">C</span><span class="zee">z</span> Costume Contest
                </h1>
                <table class="contest_meta contest_info">
                    <tbody>
                        <tr>
                            <th>
                                Name
                            </th>
                            <td>
                                <b>hats and such</b>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Started
                            </th>
                            <td>
                                <small>07/15/08</small>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Ends
                            </th>
                            <td>
                                <small style="margin-bottom: 3px; display: block;">05/13/11</small> <span class="notice">This contest ends in 1 year, 9 months</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Description
                            </th>
                            <td>
                                here is a contest dedicated to awesome hats
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <a href="/costume-upload/?contest_id=105&amp;typeof=contest&amp;modal=1&amp;KeepThis=true&amp;TB_iframe=true&amp;width=400&amp;height=500" id="contest_upload" class="funnel thickbox" name="contest_upload">Enter this contest now!</a>
                            </td>
                        </tr>
                    </tbody>
                </table><br class="clear">
            </div>
            <ul id="contests_list">
                <li>
                    <a href="/contest/105">Hats And Such</a><br>
                    <small><b>12767</b> <em>votes</em></small>
                    <p>
                        here is a contest dedicated to awesome hats
                    </p>
                </li>
                <li>
                    <a href="/contest/107">General</a><br>
                    <small><b>3009</b> <em>votes</em></small>
                    <p>
                        This is the anything-goes general contest!
                    </p>
                </li>
            </ul>
        </div>
    </div><br class="clear">
</div>

This is code for a costume contest application I'm presently building. There will be a row of radio buttons 1-10 wrapped in labels that will all be individually clickable. Upon the click event, the form will submit, I do some post-processing and return a json object from which I will inject the post data into the page. This process will continue until you've voted for every costume in the contest.

Firefox, Safari, Camino all work as intended.
All IE's flip on the container = form.parents("#container"); line of the javascript (which subsequently makes any other reference to container fail as well.

It's worth noting that the form variable is found fine. A subsequent alert(form[0].id); does echo out costume_rating_form as intended. I'm unsure when I can't then use the jquery object to find the #container element.

I suspect that livequery isn't binding properly to the the click event in IE browsers. Does anyone have any insight into this and how I may go about fixing it?

$("form#costume_rating_form input[type=radio]").livequery("click",function(){
    form = $(this).parents("form:first");
    container = form.parents("#container");
    vote_eid = form.find("input#vote_eid");
    contest_results = container.find("#contest_results");
    contest_image = container.find(".contest_image:first");
    contest_next = container.find("#side_bar #next_up");
    contest_content = contest_image.next();
    .....

<div class="full center" id="container">
    <div class="s1-2" id="main">
        <div class="s_w clearfix">
            <div id="costume_rating">
                <h3 class="middle">
                    Rate This Costume
                </h3>
                <form action="/costume-rate/" method="post" id="costume_rating_form" name="costume_rating_form">
                    <label style="display: none;" for="costume_rating" class="error contest_selector">Please select a rating.</label>
                    <div id="rating_scores">
                        <!-- <div class="rate_tab radius_t_5">Rate This Costume</div> -->
                        <div class="thumb_down">
                            :-/
                        </div>
                        <div class="middle">
                            <label for="r1" class="contest_selector"><input type="radio" value="1" name="costume_rating" id="r1" class="radio" style="position: absolute; top: 0pt; right: 99999px;">1</label> <label for="r2" class="contest_selector"><input type="radio" value="2" name="costume_rating" id="r2" class="radio" style="position: absolute; top: 0pt; right: 99999px;">2</label> <label for="r3" class="contest_selector"><input type="radio" value="3" name="costume_rating" id="r3" class="radio" style="position: absolute; top: 0pt; right: 99999px;">3</label> <label for="r4" class="contest_selector"><input type="radio" value="4" name="costume_rating" id="r4" class="radio" style="position: absolute; top: 0pt; right: 99999px;">4</label> <label for="r5" class="contest_selector"><input type="radio" value="5" name="costume_rating" id="r5" class="radio" style="position: absolute; top: 0pt; right: 99999px;">5</label> <label for="r6" class="contest_selector"><input type="radio" value="6" name="costume_rating" id="r6" class="radio" style="position: absolute; top: 0pt; right: 99999px;">6</label> <label for="r7" class="contest_selector"><input type="radio" value="7" name="costume_rating" id="r7" class="radio" style="position: absolute; top: 0pt; right: 99999px;">7</label> <label for="r8" class="contest_selector"><input type="radio" value="8" name="costume_rating" id="r8" class="radio" style="position: absolute; top: 0pt; right: 99999px;">8</label> <label for="r9" class="contest_selector"><input type="radio" value="9" name="costume_rating" id="r9" class="radio" style="position: absolute; top: 0pt; right: 99999px;">9</label> <label for="r10" class="contest_selector"><input type="radio" value="10" name="costume_rating" id="r10" class="radio" style="position: absolute; top: 0pt; right: 99999px;">10</label> <input type="submit" value="Vote" name="submit" id="vote_button" class="submit" style="display: none;">
                        </div>
                        <div class="thumb_up">
                            8-D
                        </div>
                    </div><input type="hidden" value="4847" name="vote_eid" id="vote_eid"> <input type="hidden" value="23339" name="user_id"> <input type="hidden" value="105" name="contest_id">
                </form><br class="clear">
                <div class="contest_image">
                    <img src="/users/kylebradshaw-3161-full.gif" style="display: inline;">
                </div>
                <div class="contest_content">
                    <div class="contest_metar">
                        <table class="contest_meta">
                            <tbody>
                                <tr>
                                    <th>
                                        Title
                                    </th>
                                    <td>
                                        <b>hre's a title of the thing</b>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Description
                                    </th>
                                    <td>
                                        and here's an image of the thing
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Tags
                                    </th>
                                    <td>
                                        <a href="/tag/heres+a+tag/">heres a tag</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Submitted by
                                    </th>
                                    <td style="vertical-align: text-top;" class="submitted_by">
                                        <a href="/user/view/kylebradshaw/">kylebradshaw</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Share This
                                    </th>
                                    <td class="small">
                                        <input type="text" size="46" value="http://cz3.kb.mechmedia.com/costume-rate/4847/" style="padding: 1px; margin-bottom: 4px;" class="text select_box small"><br>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div><br class="clear">
                    <div id="commentary">
                        <h2>
                            Commentary
                        </h2>
                        <div id="entry_comments">
                            <p>
                                None yet! Leave a comment!
                            </p>
                        </div><!-- end entry_comments -->
                    </div>
                    <div id="comment_here">
                        <h2>
                            Be the first to comment!
                        </h2>
                        <form method="post" action="/update/">
                            <p>
                                <textarea style="width: 90%;" rows="2" name="comment">
                            </p><input type="hidden" value="4847" name="entry_id"><input type="hidden" value="105" name="contest_id"><input type="hidden" value="add_comment" name="action"><input type="hidden" value="html" name="content_type">
                            <p>
                                <input type="submit" value="Add Your Comment" name="submit">
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="s1-12" id="side_bar">
        <div class="s_w">
            <div id="next_up">
                <h3>
                    Next
                </h3>
                <div class="img_container">
                    <img alt="" src="/users/Crow_Nest_Vintage-2411-thumb.gif">
                </div>
                <div class="img_container">
                    <img alt="" src="/users/mizzmedusa-2155-thumb.gif">
                </div>
                <div class="img_container">
                    <img alt="" src="/users/tantlaymance-2053-thumb.gif">
                </div>
                <div class="img_container">
                    <img alt="" src="/users/gulfcoastdiesel-2024-thumb.gif">
                </div>
                <div class="img_container">
                    <img alt="" src="/users/PokeyWoman-1578-thumb.gif">
                </div>
            </div>
            <div id="new_up">
                <h3>
                    New
                </h3>
                <div class="img_container">
                    <a href="/costume-rate/4877/"><img alt="" src="/users/kylebradshaw-3197-thumb.gif"></a>
                </div>
                <div class="img_container">
                    <a href="/costume-rate/4874/"><img alt="" src="/users/kylebradshaw-3190-thumb.gif"></a>
                </div>
                <div class="img_container">
                    <a href="/costume-rate/4873/"><img alt="" src="/users/kylebradshaw-3189-thumb.gif"></a>
                </div>
                <div class="img_container">
                    <a href="/costume-rate/4872/"><img alt="" src="/users/kylebradshaw-3188-thumb.gif"></a>
                </div>
                <div class="img_container">
                    <a href="/costume-rate/4871/"><img alt="" src="/users/kylebradshaw-3185-thumb.gif"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="s5-12 end" id="pre_bar">
        <div class="s_w">
            <div id="contest_results">
                <h3>
                    <a href="/costume-rate/4848/">modal test</a> Voting Results
                </h3>
                <div class="contest_image left">
                    <img alt="modal test" src="/users/kylebradshaw-3162-full.gif">
                </div>
                <table class="contest_meta">
                    <tbody>
                        <tr>
                            <th>
                                Official Score
                            </th>
                            <td>
                                <span class="strong shout">6.0/10</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Votes
                            </th>
                            <td>
                                1 vote
                            </td>
                        </tr>
                        <tr>
                            <th>
                                You Voted
                            </th>
                            <td>
                                <b class="knock_out">6</b>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Submitted by
                            </th>
                            <td style="vertical-align: text-top;" class="submitted_by">
                                <a href="/user/view/kylebradshaw/">kylebradshaw</a>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Share This
                            </th>
                            <td class="small">
                                <input type="text" value="http://cz3.kb.mechmedia.com/costume-rate/4848/" style="padding: 1px; margin-bottom: 4px; width: 90%;" class="text select_box small"><br>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div><br class="clear">
            <br class="clear">
            <br class="clear">
            <div class="section first" id="contest_info">
                <h1>
                    <span class="costum">C</span><span class="zee">z</span> Costume Contest
                </h1>
                <table class="contest_meta contest_info">
                    <tbody>
                        <tr>
                            <th>
                                Name
                            </th>
                            <td>
                                <b>hats and such</b>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Started
                            </th>
                            <td>
                                <small>07/15/08</small>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Ends
                            </th>
                            <td>
                                <small style="margin-bottom: 3px; display: block;">05/13/11</small> <span class="notice">This contest ends in 1 year, 9 months</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Description
                            </th>
                            <td>
                                here is a contest dedicated to awesome hats
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <a href="/costume-upload/?contest_id=105&typeof=contest&modal=1&KeepThis=true&TB_iframe=true&width=400&height=500" id="contest_upload" class="funnel thickbox" name="contest_upload">Enter this contest now!</a>
                            </td>
                        </tr>
                    </tbody>
                </table><br class="clear">
            </div>
            <ul id="contests_list">
                <li>
                    <a href="/contest/105">Hats And Such</a><br>
                    <small><b>12767</b> <em>votes</em></small>
                    <p>
                        here is a contest dedicated to awesome hats
                    </p>
                </li>
                <li>
                    <a href="/contest/107">General</a><br>
                    <small><b>3009</b> <em>votes</em></small>
                    <p>
                        This is the anything-goes general contest!
                    </p>
                </li>
            </ul>
        </div>
    </div><br class="clear">
</div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

抚你发端 2024-08-05 16:11:34

首先,您使用 LiveQuery 而不是内置的 Events/live 是否有原因?

其次,由于#container是一个唯一的ID,因此您不需要找到它。 尝试:

container = $("#container");

同样使用 #vote_eid#contest_results 等。

最后,除非 formcontainervote_eid等都是全局变量,需要用var声明。

更正这些问题并让我们知道问题是否仍然存在。

Firstly, is there a reason you're using LiveQuery instead of the built-in Events/live?

Secondly, since #container is a unique id, you don't need to find it. Try:

container = $("#container");

Likewise with #vote_eid, #contest_results, etc.

Finally, unless form, container, vote_eid, etc. are global variables, you should declare them with var.

Correct these issues and let us know if the problem persists.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文