Делегат не работает в IE? Очень странное поведение

#jquery #html #internet-explorer

#jquery #HTML #internet-explorer

Вопрос:

Я замечаю, что эта моя собственная страница вообще не работает в IE8: попробуйте нажать на Add Category , чем на Create Category : вы должны получить предупреждение. На самом деле этого не происходит в моем IE8. Chrome, Firefox, все в порядке.

Почему? Это весь код :

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>The GTW Database</title>     
    <script type="text/javascript" src="settings/jquery-1.5.min.js"></script> 
    <script type="text/javascript" src="mgmt/mgmt_javascript.js"></script>          
    <link type="text/css" rel="stylesheet" href="settings/style.css" title="Style" media="all" /> 
</head> 

<body> 
    <script type="text/javascript"> 
        $(document).ready(function() {
            $('#addCategory').click(function(e) {
                e.preventDefault();
                $('#addCategoryForm').toggle();
            }); 

            $("#addCategoryForm").delegate("form[name=categoryForm]", "submit", function(e){
                e.preventDefault();
                alert("Yeah, I'm In");
            }); 
        });
    </script>   

    <div class="main_content_remark"> 
        <div class="back1"> 
            Categories
        </div> 

        <div class="back2"> 
            <a id="addCategory" class="lblueb" href="#">Add Category</a> 
        </div> 
    </div> 

    <div class="main_content_remark" id="addCategoryForm" style="display:none; height:32px;"> 
        <form method='post' name="categoryForm"> 
            <div class="categoryName"> 
                <div class="categoryName1"> 
                    Name
                </div> 

                <div class="categoryName2"> 
                    <input type="text" maxlength="50" name="name" class="input400" /> 
                </div> 

                <div class="categoryName3"> 
                    amp;nbsp;
                </div> 

                <div class="categoryName4"> 
                    <input type="submit" value="Create Category" /> 
                </div>                  
            </div> 
        </form>         
    </div> 
</body>

Надеюсь, вы сможете мне помочь. Это действительно странно… тот же метод отлично работает на других страницах…

1. С какой версией IE вы столкнулись с этой проблемой? Я пробовал IE 7 и 8, и у меня не было проблем с этим. Не могли бы вы попробовать jsfiddle.net/niklasvh/w4jnM и посмотрите, работает ли это у вас?

2. Что-то еще в вашем скрипте портит обработчик событий формы. Я попробовал то же самое в IE 7, 8 и 9, и я получаю caio. Пожалуйста, предоставьте больше информации. Как и другие скрипты / разметка на вашей странице.

3. Готово! Проверьте весь код и ссылку.

Ответ №1:

Проблема в том, что вы используете [name=categoryForm] , что сбивает с толку IE7, 8. Измените его на идентификатор или, если эта форма является единственной формой внутри #addCategoryForm , тогда просто напишите:

 $("#addCategoryForm").delegate("form", "submit", function (e) {
            e.preventDefault();
            alert("Yeah, I'm In");
        });