Блог

Главная - Вопросы по программированию - jQuery …Как проверить переключатель при нажатии сгенерированной строки CodeIgniter Ajax / JSON

jQuery …Как проверить переключатель при нажатии сгенерированной строки CodeIgniter Ajax / JSON

#jquery #ajax #json #codeigniter #radio-button

#jQuery #ajax #json #CodeIgniter #переключатель

Вопрос:

Я хотел, чтобы переключатель проверялся при нажатии на его конкретную строку, но он не работает. Я подозреваю, что проблема с селектором jquery связана с сгенерированной таблицей ajax / json. Это мой список кода. Я новичок в StackOverflow.

             <html>
            <head>
            <script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.6.1.min.js"></script>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <style type="text/css">
            <!--

            .selected td { background-color: #FF0000; }

            -->
            </style>
            </head>
            <body>
            <div id="search_form">
              <form id="form1" name="form1" method="post" action="">
                  <table width="80%" border="1" align="center" cellspacing="0">
                    <tr>
                      <td><label>
                        <div align="center">
                          <p>
                            <input name="search_input" type="text" id="search_input" value="ASET" size="50" />
                          </p>
                        </div>
                      </label></td>
                      <td width="10%" rowspan="2"><div align="center" id="btn_search">Search</div></td>
                    </tr>
                    <tr>
                      <td><label>
                        <div align="center">
                        <input name="rb_searchType" type="radio" id="cb_searchType" value="fileno" checked="checked" />
                      File No
                       <input type="radio" name="rb_searchType" id="cb_searchType2" value="filetitle" />
                      Title</div>
                      </label></td>
                    </tr>
                  </table>
                  <div align="center"></div>
                  <div align="center"></div>
              </form>
            </div>

            <div id="status_submit">
            </div>
            <div id="search_result1">
            </div>
            </body>
            <script type="text/javascript">
            $(document).ready(function() {

                $('#btn_search').click(function() {
                    $('#form1').submit();
                });

                $("form").submit(function() {

                  var fSearchInputValue = $('#search_input').attr('value');
                  var fSearchType = $("input[@name='rb_searchType']:checked").val();

                 $('#status_submit').html("please wait......");
                  $.ajax({
                        type: "POST",
                        url: "<?php echo site_url('files/search_list_file_json/'); ?>" "/",
                        data: "SearchInputValue="  fSearchInputValue  "amp; SearchType="  fSearchType,
                        dataType: "json",
                        success: function(data) {
                        var contentHtml = '<table width="100%" border="1" cellpadding="2" cellspacing="0" bordercolor="#000000" id="Table"><tr><td width="5%">amp;nbsp;</td><td width="15%">FILE NOamp;nbsp;</td><td>SUBJECTamp;nbsp;</td></tr>';

                            $(data).each(function(index, item) {
                                contentHtml  = '<tr><td><input type="radio" name="rb_fileno" id="rb_fileno" value="';
                                contentHtml  = item.FileNo;
                                contentHtml  = '" />amp;nbsp;</td>';               
                                contentHtml  = '<td>';
                                contentHtml  = item.FileTitle;
                                contentHtml  = 'amp;nbsp;</td></tr>';  
                            });

                        contentHtml  = "</table>";
                          $('#search_result1').html(contentHtml);
                          $('#status_submit').fadeIn(function(){$('#status_submit').html('');});

                        },
                        error: function(){
                            var contentHtml='No result';
                            $('#status_submit').fadeIn(function(){$('#status_submit').html(contentHtml);});         
                        }
                    });

            return false;
                }); //end ajax json

                //check radio button when row is clicked
                 $('#search_result1s tr').click(function(event) {
                    // $(data).filter('div.search_result1 tr').click(function(event) {

                    $(this).find('td input:radio').prop('checked', true);
                    $(this).addClass("selected").siblings().removeClass("selected");
                 });

            }); // end document.ready

            </script>
            </html>

Спасибо

Ответ №1:

Попробуйте это

 $('#search_result1s tr').live('click',function(event) {
    $(this).find('td :input[type=radio]').attr({'checked':'checked'});
     ...
});

по сути, метод .live() работает аналогично .click(), разница только в том, что когда вы динамически добавляете html-элемент в тело, это означает, что после загрузки страницы .live() выполняется успешно, но метод .click() завершается неудачей.

Ответ №2:

для меня это похоже на опечатку. не следует 

 $('#search_result1s tr').click(function(event)

быть

 $('#search_result1 tr').click(function(event)