Добавление «виджетов» в прямом эфире на сайт

-1

В настоящее время я нахожусь в создании веб-сайта с различными виджетами, которые я хочу, чтобы иметь возможность добавлять/удалять на лету.Добавление «виджетов» в прямом эфире на сайт

Я использую jQuery для достижения этого (по крайней мере, для планирования).

Самый простой виджет - это виджет входа. Это выглядит так:

<div id="widget1"> 
    <div class="close"></div> 
    <div id="widget1_title"></div> 
    <div id="widget1_content"> 


     <form method='post' action='index.php'> 
     <div id="widget1_username"> 
     Username<input type='text' maxlength='16' name='user' value='' /> 
     </div> 

     <div id="widget1_password"> 
     Password<input type='password' maxlength='16' name='pass' value='' /> 
     </div> 

     <div id="widget1_submit"> 
     <input type='submit' value='LOGIN' /> 
     </div> 


    </div> 
</div>

Это сохраняется в файле login_widget.html. Поскольку Логин-виджет является то, что должно быть предварительно загружены на сайте (без того, чтобы пользователь привести его) У меня есть файл index.php похож на это:

<body> 



    <div id="container"> 
     <div id="content"> 
      <div id="sidebar"> 
       <div id="login-sidebar"></div> 
      </div> 

      <div id="header"> 
       <div></div> 
       <div></div> 
       <div id="header-logo"></div> 
      </div> 

      <div id="main-content"> 

       <div id="widget1"> 
        <div class="close"></div> 
        <div id="widget1_title"></div> 
        <div id="widget1_content"> 


         <form method='post' action='index.php'> 
         <div id="widget1_username"> 
         Username<input type='text' maxlength='16' name='user' value='' /> 
         </div> 

         <div id="widget1_password"> 
         Password<input type='password' maxlength='16' name='pass' value='' /> 
         </div> 

         <div id="widget1_submit"> 
         <input type='submit' value='LOGIN' /> 
         </div> 


        </div> 
       </div>    


      </div> 

      <div id="footer"> 

      </div> 

     </div> 
    </div> 


</body>

(Первоначально это в <?php include_once('login_widget.html'); ?>).

У меня тогда есть кнопка, которую я нажимаю для загрузки кода из файла.

Вот код JQuery:

$(document).ready(function(){ 



$(".close").click(function(){ 
    $(this).parent().remove(); 
}); 


$("#login-sidebar").click(function(){ 
    $.ajax({ 
     url: 'login_widget.html' 
    }).done(function(data) { 
     $('#main-content').append(data); 
    }); 
}); 

});

И теперь к этой проблеме. Это работает в том, что он размещает html-код, и он отображается на сайте, но проблема в том, что кнопка «закрыть» больше не работает. Поэтому я не могу удалить новые созданные html-элементы, используя класс с именем «close».

Я очень новичок в jQuery, но считаю, что это один из способов сделать это, но я что-то упустил?

Заранее благодарен!

источник

2014-01-17 Klesken

Значит, вы фактически не добавляете виджетов до тех пор, пока страница не загрузится? функция '$ (jQuery) .click()' не будет работать с динамически добавленными элементами. В зависимости от вашей версии jQuery вы можете использовать функцию '.live()' ([.live() documentation] (http://api.jquery.com/live/)) или функцию '.on()' ([.on() документация] (http://api.jquery.com/on/)). – baacke

@baacke можно с уверенностью предположить, что у него есть хотя бы метод делегата, так как он использует отложенные объекты. –

Создайте свои виджеты как модули, которые связывают свои собственные события, когда они созданы, чтобы удалить себя или использовать делегирование событий. Делегирование событий будет самым простым с учетом самого базового кода, который вы используете до сих пор.

$("#main-content").on("click",".close",function(){ 
    $(this).parent().remove(); 
})

источник

2014-01-17 23:01:05

Спасибо, этот код работает отлично. Как я уже сказал, я только начинаю jquery и так далее. Было бы здорово, если бы вы могли указать мне направление создания модулей с событиями, поскольку это звучит как что-то, что мне понадобится в будущем. – Klesken

Я бы хотел, но есть так много разных способов сделать это, каждый из которых имеет плюсы и минусы, нацеленные на то, как/где он используется. В принципе, подумайте об этом как о функции, которая создает виджет при вызове. Например, 'createLogin()'. эта функция добавит html для виджета и привяжет любые события, которые требуется виджетам, например, событие close. –

Добавление «виджетов» в прямом эфире на сайт

ответ

Смежные вопросы