Помогите разобратся с Jquery append

Тема в разделе "Другие языки", создана пользователем unsiker, 1 июл 2011.

Модераторы: Цукер
  1. unsiker

    unsiker

    Регистр.:
    6 июн 2008
    Сообщения:
    465
    Симпатии:
    172
    Есть простенький скрипт на Jquery. Его работа: если нажал на один из чекбоксов на форме все остальные стают недоступными(проставлется атрибут disabled). Но проблема в следующем: при создании страницы количество чекбоксов фиксированное и их приходится добавлять. Добавляю с помощью Jquery append(). Так вот при клике на добавленные с помощью Jquery чекбоксы ничего не происходит. Как сделать так что б при клике на динамически созданный чекбокс происходил вызов нужной функции?
    Код:
    PHP:
    <html>
    <
    head>
      <
    script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
    $(document).ready(function() {
        $(":checkbox").click(function() {
              if (this.checked){
                  $(":checkbox").attr('disabled', true);
                  $(this).attr('disabled', false);
                } else{
                    $(":checkbox").attr('disabled', false);
                }
        });
        $("#btn").click(function() {
            var iteration = $("#count").val();
            iteration++;
            $("#check").append('<input type="checkbox" value="'+iteration+'" name="chek['+iteration+']" id="correct"> Check'+iteration+'<br />');
        });
    });
    </script>
    <input type="hidden" value="2" name="chek" id="count">
    <div id="check">
        <input type="checkbox" value="1" name="chek[1]" id="correct"> Check1<br />
        <input type="checkbox" value="2" name="chek[2]" id="correct"> Check2<br />
    </div>
    <br /><br /><br />
    <input type="button" id="btn" value="Add CheckBox">
    </body>
    </html>
    Во вложении сама html страничка с проблемным кодом
     

    Вложения:

    • check.zip
      Размер файла:
      676 байт
      Просмотров:
      3
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    Так как список чекбоксов пополнился после обхода селектора ($(":checkbox")), то надо опять обойти все чекбоксы (или только добавленный) и присвоить им click. Ещё добавлена проверка какой чекбокс добавлять и исправлена итерация.

    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>test</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    
    <body>
    <script type="text/javascript">
    var checked = false;
    $(document).ready(function() {
        
        function checkbox(){
            //[type=checkbox] больше производительности может пригодится
            $("#check [type=checkbox]").click(function() {
                  if (this.checked){
                      $("#check [type=checkbox]").attr('disabled', true);
                      $(this).attr('disabled', false);
                      checked = true;
                    } else{
                        $("#check [type=checkbox]").attr('disabled', false);
                        checked = false;
                    }
            });
        }
        
        checkbox();
        
        $("#btn").click(function() {
            //количество чекбоксов
            var iteration = $("#check [type=checkbox]").size();
            iteration++;
            //проверка какой чекбокс добавлять disabled или нет
            var tag = " disabled";
            if(!checked){
                tag = "";
            }
            $("#check").append('<label><input type="checkbox" value="'+iteration+'" name="chek['+iteration+']" id="correct"'+tag+'> Check'+iteration+'</label><br />');
            checkbox();
        });
    });
    
    </script>
    <input type="hidden" value="2" name="chek" id="count">
    <div id="check">
        <label><input type="checkbox" value="1" name="chek[1]" id="correct"> Check1</label><br />
        <label><input type="checkbox" value="2" name="chek[2]" id="correct"> Check2</label><br />
    </div>
    <br /><br /><br />
    <input type="button" id="btn" value="Add CheckBox">
    </body>
    
    </html>
    
     
    unsiker нравится это.
  3. unsiker

    unsiker

    Регистр.:
    6 июн 2008
    Сообщения:
    465
    Симпатии:
    172
    есть еще один вопрос:
    когда я кликаю на чекбоксу меня происходят следущие события:
    1. все чекбоксы принимают атрибут .attr('disabled', true);
    2. Тот чекбокс на который произошло нажатие принимает (до этого у него disabled - true, проставлен в первом пункте ) .attr('disabled', false);

    Можно ли как то проставить .attr('disabled', true) всем кроме того чекбокса на который был клик?
     
  4. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    проблема что disabled элементы не возвращают клики, тогда в обход обернуть такие элементы div тегом и уже отслеживать его клики.
    Тут увидел

    Перейти по ссылке


    Демо
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>test</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    
    <body>
    <script type="text/javascript">
    
    $(document).ready(function() {
        /*****Checkbox click****/
        function checkbox(){
            $("#check [type=checkbox]").unbind();
            //[type=checkbox] больше производительности может пригодится
            $("#check [type=checkbox]").click(function() {
                $("#check [type=checkbox]").attr('disabled', true);
                $("#check [type=checkbox]").attr('checked', false);
                
                $(this).attr('disabled', false);
                $(this).attr('checked', true);
                
                
                
    // find the disabled elements
      $("#check [type=checkbox]").each(function (){
        // get the disabled element
        var $self = $(this)
          // get it's parent label element
          , $parent = $self.closest("label")
          // create an overlay
          , $overlay = $("<div />");
    
        // style the overlay
        $overlay.css({
          // position the overlay in the same real estate as the original parent element 
            position: "absolute"
          , top: $parent.position().top
          , left: $parent.position().left
          , width: $parent.outerWidth()
          , height: $parent.outerHeight()
          , zIndex: 10000
          // IE needs a color in order for the layer to respond to mouse events
          , backgroundColor: "#fff"
          // set the opacity to 0, so the element is transparent
          , opacity: 0
        })
        // attach the click behavior
        .click(function (){
          // trigger the original event handler
          return $self.trigger("click");
        });
    
        // add the overlay to the page  
        $parent.append($overlay);
        });
                
                
                
                
                
                
                
            });
            
    
      
      
      
      
      
    
            
        }
        
        checkbox();
        /******Add checkbox*******/
        $("#btn").click(function() {
            //количество чекбоксов
            var iteration = $("#check [type=checkbox]").size();
            iteration++;
            $("#check").append('<label><input type="checkbox" value="'+iteration+'" name="chek['+iteration+']" id="correct"> Check'+iteration+'</label><br />');
            checkbox();
        });
    });
    
    </script>
    <input type="hidden" value="2" name="chek" id="count">
    <div id="check">
        <label><input type="checkbox" value="1" name="chek[1]" id="correct"> Check1</label><br />
        <label><input type="checkbox" value="2" name="chek[2]" id="correct"> Check2</label><br />
        
    </div>
    <br /><br /><br />
    <input type="button" id="btn" value="Add CheckBox">
    </body>
    
    </html>
    
    А вообще всё это напоминает эмуляцию радио кнопки.
    Демо с радио кнопками:
    HTML:
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>test</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    
    <body>
    <script type="text/javascript">
    
    $(document).ready(function() {
        $("#btn").click(function() {
            var iteration = $("#check [type=radio]").size();
            iteration++;
            $("#check").append('<label><input type="radio" name="radiogroup1" value="'+iteration+'" id="RadioGroup1_'+iteration+'" />Radio</label><br />');
        });
    });
    
    </script>
    <input type="hidden" value="2" name="chek" id="count">
    <div id="check">
        <label><input type="radio" name="radiogroup1" value="radio" id="RadioGroup1_0" />Radio</label><br />
        <label><input type="radio" name="radiogroup1" value="radio" id="RadioGroup1_1" />Radio</label><br />
    </div>
    <br /><br /><br />
    <input type="button" id="btn" value="Add Radio">
    </body>
    
    </html>
    
     
    unsiker нравится это.
  5. unsiker

    unsiker

    Регистр.:
    6 июн 2008
    Сообщения:
    465
    Симпатии:
    172
    В этом примере да. Но проблема в том что реальная задача намного обширнее и возникают случаи когда нужно больше чем один чекбокс кликнуть, тогда то и радобатон отпадает. а спроблемой я разобрался 2 часа поиска и вуаля: