jQuery создает несколько экземпляров для уже работающего скрипта

Question

Несколько дней назад я задал вопрос, на который любезно ответил @ RustyTheBoyRobot.

Код ниже работает на 100%, но мне нужен способ добавить несколько кнопок «найти адрес» на странице. Один для почтового адреса и один для почтового адреса.

Может кто-нибудь сказать мне, как я могу сделать это, не дублируя модальное окно и Javascript?

ОБНОВЛЕНИЕ: После некоторого тестирования я понял, что мне нужно сделать, мне нужен какой-то способ передачи переменной из кнопок в модальную форму таблицы, поэтому, когда я щелкаю строку, она только обновляет форму поля я уточняю.

Код

Я создал форму в модальном поле с таблицей. При нажатии на строку таблицы она заполняет форму на родительской странице.

Модальная коробка

<div id="modal_form" title="Address Search">
<form id="address_search">
    <ul>
        <li><label for="name">Search by street description</label>
            <input type="text" name="street_description" id="street_description" />
            <input type="button" id="search_button" class="form_button" value="Search"></li>
    </ul>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
                  <tbody><tr>
                    <td width="200px"><a href="#">Street</a></td>
                    <td width="200px"><a href="#">Suburb</a></td>
                    <td width="200px"><a href="#">City</a></td>
                  </tr>
                  <tr id="row1">
                    <td class="address_street">Harambee Road</td>
                    <td class="address_suburb">Onerai</td>
                    <td class="address_city">Onerai Rural</td>
                  </tr>
                  <tr id="row2">
                    <td class="address_street">Hutchinson Road</td>
                    <td class="address_suburb">Mt Wellington</td>
                    <td class="address_city">Auckland City</td>
                  </tr>
                  <tr id="row3">
                    <td class="address_street">Kauri Road</td>
                    <td class="address_suburb">Westfordshire</td>
                    <td class="address_city">Palmerston North</td>
                  </tr>
            </tbody></table><!-- /table#table-data -->
        </form>
</div><!-- /div#modal_form -->

Javascript

<script type="text/javascript">
  $(document).ready(function() {
    $('#table-data tr').click(function () {
      var curRowId = $(this).attr("id");
      $('#street_name').val( $('#' + curRowId + ' td.address_street').text() );
      $('#suburb').val( $('#' + curRowId + ' td.address_suburb').text() );
      $('#city').val( $('#' + curRowId + ' td.address_city').text() );
  $("#modal_form").dialog('close');
    });
  });
</script>

Родительская форма, где заполняются поля формы

<form id="profile">
<ul>
<li><label for="street_number">Street Number</label><input id="street_number" type="text" placeholder="Street Number" name="street_number" ><input type="button" class="form_button" id="find_address" value="Find Address"></li>
<li><label for="street_name">Street Name</label><input id="street_name" type="text" placeholder="Street Name" name="street_name"  disabled="disabled" ></li>
<li><label for="suburb">Suburb</label><input id="suburb" type="text" placeholder="Suburb" name="suburb"  disabled="disabled" ></li>
<li><label for="city">City</label><input id="city" type="text" placeholder="City" name="city" disabled="disabled" ></li>
<li><input type="submit" id="submit" value="Save"></li>
</ul>
</form>

Answer 1

В двух словах, вы можете подумать о создании плагина jquery.

Если вы придумали единый способ идентификации полей адреса с помощью определенной кнопки, плагин jquery может автоматически обработать нужные поля и т. Д.

Вот хороший учебник:

http://www.authenticsociety.com/blog/jQueryPluginTutorial_Beginner

Answer 2

В итоге я использовал jquery для добавления разных имен классов в таблицу в зависимости от того, какую кнопку вы нажали.

Код

<script type="text/javascript">
$(document).ready(function() {
$('#find_address').click(function(){
$('#modal_form').dialog('open');
$('table#table-data_classy').attr( 'id', 'table-data' );   $('td.address_street_classy').removeClass("address_street_classy").addClass("address_street");    $('td.address_suburb_classy').removeClass("address_suburb_classy").addClass("address_suburb");
$('td.address_city_classy').removeClass("address_city_classy").addClass("address_city");
}); //end click handler
$('#find_address_classy').click(function(){
$('#modal_form').dialog('open');
$('table#table-data').attr( 'id', 'table-data_classy' );
$('td.address_street').removeClass("address_street").addClass("address_street_classy");
$('td.address_suburb').removeClass("address_suburb").addClass("address_suburb_classy");
$('td.address_city').removeClass("address_city").addClass("address_city_classy");
}); //end click handler
}); //end ready event
</script>


<script type="text/javascript">
  $(document).ready(function() {
    $('#table-data tr').live('click', function () {
      var curRowClass = $(this).attr("class");
      $('#street_name').val( $('.' + curRowClass + ' td.address_street').text() );
      $('#suburb').val( $('.' + curRowClass + ' td.address_suburb').text() );
      $('#city').val( $('.' + curRowClass + ' td.address_city').text() );
      $("#modal_form").dialog('close');
    });
  });
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $('#table-data_classy tr').live('click',function () {
      var curRowClass = $(this).attr("class");
      $('#street_name_classy').val( $('.' + curRowClass + ' td.address_street_classy').text() );
      $('#suburb_classy').val( $('.' + curRowClass + ' td.address_suburb_classy').text() );
      $('#city_classy').val( $('.' + curRowClass + ' td.address_city_classy').text() );
      $("#modal_form").dialog('close');
    });
  });

Приветствия