Почему Internet Explorer не может запустить этот простой jQuery?

#jquery #internet-explorer #internet-explorer-8

Вопрос:

Я запускаю действительно простой скрипт jQuery для захвата всех электронных писем, выбранных флажками в таблице. Таблица выглядит следующим образом:

 <table>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" value="MD5HASH" />
            </td>
            <td>
                First Name
            </td>
            <td class="email">
                Email Address
            </td>
        </tr>
    </tbody>
</table>

Мой jQuery выглядит так:

 $("#submitButton").click(function() {
    var output = [];
    $("table tbody tr:has(input:checkbox:checked)").each(function() {
        var email = $('td.email', $(this)).text();
        if (validate(email) amp;amp; output.indexOf(email) == -1)
            output.push(email);
    }); 

    $("#emails").val(output.join(", "));
});

function validate(email) {
    return /[a-z0-9!#$%amp;'* /=?^_`{|}~-] (?:.[a-z0-9!#$%amp;'* /=?^_`{|}~-] )*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.) [a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(email); 
}

Это с треском проваливается в IE, но работает везде.

table tbody tr:has(input:checkbox:checked) Селектор ничего не соответствует.
Вызов validate выдает Object expected ошибку.

ПОЧЕМУ !? Разве jQuery не предназначен для кроссбраузерности и переносимости?

1. Вы пытались сузить проблему, выяснив, связана ли проблема с регулярным выражением или нет?

2. попробуйте удалить tbody из селектора. IE часто путается с tbody, я думаю

3. Если validate() не работает, вы можете попробовать заключить регулярное выражение в круглые скобки — не уверен, может ли IE справиться с /regex/.test синтаксисом.

4. еще одна важная причина заключается в том, что IE — просто плохой браузер, Microsoft должна поставлять Windows с Firefox, Safari или Google Chrome 🙂

Ответ №1:

Internet Explorer (< 9) не имеет Array.prototype.indexOf . Попробуйте $.inArray вместо этого использовать jQuery (он кроссбраузерный и будет фактически использоваться Array.prototype.indexOf , если он существует:-P).

 if (validate(email) amp;amp; $.inArray(email,output) == -1)
  output.push(email);

1. СМЕШНО. Как вы можете не поддерживать indexOf ? Я всегда воспринимал это как должное на любом другом языке, который я использую… вы никогда не знаете, что у вас есть, пока оно не исчезнет.

2. @TKKocheran: Вы знаете, что используете Internet Explorer, верно?

3. Я знал, что это плохо, но не настолько плохо!

4. @TKKocheran: По крайней мере, IE 9 добавил его, наконец.

Ответ №2:

дайте входному классу и нацеливайте его напрямую…

 <table>
    <tbody>
        <tr>
            <td>
                <input class="emailchecked" type="checkbox" value="MD5HASH" />
            </td>
            <td>
                First Name
            </td>
            <td class="email">
                Email Address
            </td>
        </tr>
    </tbody>
</table>

Затем настройте отмеченные в вашем js следующим образом:

 $("#submitButton").click(function() {
    var output = [];
    $(".emailchecked ([checked='checked'])").each(function() {
        var email = $('td.email', $(this)).text();
        if (validate(email) amp;amp; output.indexOf(email) == -1)
            output.push(email);
    }); 

    $("#emails").val(output.join(", "));
});

function validate(email) {
    return /[a-z0-9!#$%amp;'* /=?^_`{|}~-] (?:.[a-z0-9!#$%amp;'* /=?^_`{|}~-] )*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.) [a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(email); 
}

Ответ №3:

     <table>
        <tr><td><input type="checkbox" value=""/></td><td>one@gmail.com</td></tr>
            <tr><td><input type="checkbox" value=""/></td><td>two@gmail.com</td></tr>
            <tr><td><input type="checkbox" value=""/></td><td>three@gmail.com</td></tr>
            <tr><td><input type="checkbox" value=""/></td><td>four@gmail.com</td></tr>
     </table>

    <input id="btnSubmit" type="button" value="Submit"/>

    <div id="emails"></div>

    <script type="text/javascript">
    $('#btnSubmit').click(function(e){
        var emails = [];
        $('table').find('input').each(function() {
            if ($(this).is(':checked'))
                emails.push($(this).parent().next().text());
        });

        $("#emails").empty().html(emails.join(", "));

    });
    </script>

Since you have three columns instead of two, just walk the DOM for that row.