JavaScript работает только один раз, когда это необходимо дважды на странице - PullRequest
Новая
       6

JavaScript работает только один раз, когда это необходимо дважды на странице

0 голосов
/ 28 июля 2011

Я использую кусок JS дважды для двух разных, но одинаковых событий.

Чтобы было проще, скажем, у меня есть: 

<script type="text/javascript">
    $(function(){
        $(".iframe").load(function(){
               $(this).contents().find("form").delegate(".clickThisCheckBox","click",function(){
                alert(this)
            })
        })
    })
</script>

<div class="tabs">
    <ul class="tabs-nav">
        <li><a href="#products">Products</a></li>
        <li><a href="#accessories">Accessories</a></li>
    </ul>
</div>

<div class="content">
    <div id="products">
        <iframe class="iframe">
            <form action="?" method="post">
                <input type="checkbox" name="checkBox1" class="clickThisCheckBox" />
            </form>
        </iframe>
    </div>

    <div id="accessories">
        <iframe class="iframe">
            <form action="?" method="post">
                <input type="checkbox" name="checkBox2" class="clickThisCheckBox" />
            </form>
        </iframe>       
    </div>
</div>

Это более упрощенная версия, чем у меня, но точно такая же концепция.

Поэтому, когда страница загружается, вы нажимаете флажок на открытой вкладке, и вы успешно получаете окно предупреждения с объектом. Когда вы нажимаете следующую вкладку и пытаетесь установить флажок, ничего не происходит.

AJAX или отдельная загрузка не выполняются. Все отображается при начальной загрузке страницы. Оба фрейма загружаются одновременно, и вы получаете доступ к другому файлу один раз, переключаясь на другую вкладку.

Должен ли JS быть в функции и запускаться при каждом нажатии на вкладку? Кажется, я не могу обхватить это пальцем.

Обновление : оно сводится к тому, что JS запускается только один раз, поэтому только первый iFrame на первой вкладке получает все правильные переменные и события, связанные с элементами.

Обновление : Похоже, понял это. Продолжая использовать iFrames, мне пришлось бросить все свои JS в функцию и запустить ее на $(".iframe").load(), и всякий раз, когда нажимается новая вкладка, например, $(".nav-cont li a").bind("click",function(){ //run the javascript })

Ответы [ 2 ]

0 голосов
/ 28 июля 2011

Насколько я вижу из предоставленного вами кода, вы прикрепляете обработчики событий загрузки к элементам, которые еще не были загружены на момент присоединения.

Вы пытались обернуть свой код внутри $(document).ready() чтобы убедиться, что все элементы на странице доступны для манипулирования, прежде чем присоединять к ним обработчики событий?

0 голосов
/ 28 июля 2011

Если вы хотите привязать событие загрузки к двум одинаковым фреймам: 

$("div.contents").delegate(".iframe", "load", function(){
   alert('one of the iframes loaded');
});

Одна функция-обработчик обрабатывает событие «load» для обоих iframe.

P.S. UPDATE Вы не можете использовать фреймы так, как вы объясняете в комментариях. Просто используйте вместо этого divs и установите overflow: hidden; Если целью является ограничение размера отображения этой конкретной области с данными - установите это в файле CSS: 

.form_container{width:500px;heigth:500px;overflow:hidden;}

Тогда ваш html будет: 

<div class="tabs">
    <ul class="tabs-nav">
        <li><a href="#products">Products</a></li>
        <li><a href="#accessories">Accessories</a></li>
    </ul>
</div>

<div class="content">
    <div id="products">
        <div class="form_container">
            <form action="?" method="post">
                <input type="checkbox" name="checkBox1" class="clickThisCheckBox" />
            </form>
        </div>
    </div>

    <div id="accessories">
        <div class="form_container">
            <form action="?" method="post">
                <input type="checkbox" name="checkBox2" class="clickThisCheckBox" />
            </form>
        </div>
    </div>

И JS будет: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('form').find(':checkbox').click(function(){
        alert('something got clicked');
    })
})
</script>
...