Как заставить jQuery работать правильно после загрузки удаленной страницы с jQuery?

0

Работает jQuery на текущей странице.

Я загрузил удаленную страницу в div на моей текущей странице, используя:

<div class="row-fluid">
    <ul class="nav nav-tabs">
        <li><a data-toggle="tab" id="spotlight" href="#" data-hvalue="menu1">menu1</a></li>
        <li><a data-toggle="tab" id="spotlight" href="#" data-hvalue="menu2">menu2</a></li>
    </ul>
</div>
<div class="showroom" id="showroom"></div>
    <script>
        $('a#spotlight').click(function () {
        $(this).each(function (){
            if($(this).data('hvalue')=="menu1"){
                $.getScript( "http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.min.js", function() {
                     alert('Load was performed.');
                 });
            }
            var temp = $(this).data('hvalue') + " #page";
            $('#showroom').load(temp);
        });
    });
    </div>
</script>

Удаленная страница имеет следующий код:

<div class="container-fluid" id="page">
    <div class="row-fluid">
        <button id="DrawItem">Draw Item</button>
        <div id="canvases">
            <canvas width="640" height="480"></canvas>
        </div>
    </div>
</div>

Сначала я помещаю этот фрагмент на удаленную страницу: $ (document).ready(function() {$ ('a # DrawItem)). Click (function() {$ ("canvas"). DrawArc ({fillStyle: "черный", x: 100, y: 100, radius: 50});});}); Но это не сработает. Я помещаю холст и скрипт jcanvas.min.js на одну страницу, и все работает. Если я попытаюсь загрузить холст с удаленной страницы, это не сработает.

  • 0
    Во-первых, у вас есть дубликаты идентификаторов. Во-вторых, ваш файл .js содержит HTML ??
  • 0
    Вы можете использовать дубликаты идентификаторов, если собираетесь использовать их с $ .each (); например, в структуре меню. Это позволяет вам повторно использовать код / функции, а не создавать новые функции для каждого пункта меню. Мой файл .js - это просто файл .js. Я загружаю div с удаленной страницы, с javascript в нем. JavaScript не работает, если он загружен с удаленной страницы.
Показать ещё 2 комментария
Теги:
jcanvas

1 ответ

1
Лучший ответ

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

$(document).ready(function() {
    $("#showroom").on("click", "#DrawItem", function(){
        $("canvas").drawArc({
          fillStyle: "black",
          x: 100, y: 100,
          radius: 50
        });
    });
});

Это зафиксирует события click на #showroom и запустит обработчик событий, если щелчок произошел из #DrawItem. Это мероприятие, и вы можете подробнее узнать об этом здесь...

http://api.jquery.com/on/

Поделиться
  • 0
    Спасибо! Это работает с главной страницы. Любая идея, почему он не будет работать, если он загружается на удаленной странице?
  • 1
    Я предполагаю, что на удаленной странице нет элемента с именем #showroom , поэтому нет элемента для присоединения обработчика событий. Вместо этого вы можете изменить его на $(document) . Просто лучше прикрепить обработчик к ближайшему статическому элементу.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню