jQuery - Прикрепить кнопку удаления к сценарию автозапуска? - PullRequest
Новая
       14

jQuery - Прикрепить кнопку удаления к сценарию автозапуска?

0 голосов
/ 09 октября 2009

ПЕРЕСМОТРЕННЫЙ КОД В КОНЦЕ

Я очень новичок в jquery, и хотя мне это нравится, мне нужно еще многому научиться ... Приведенный ниже код добавит новую строку, если пользователь нажмет одну из существующих ячеек строка. Эта часть отлично работает. Я пытаюсь выяснить, как также иметь кнопку [-] в конце каждой строки, на которую пользователь может нажать, чтобы удалить эту строку в случае ошибки? Это вообще возможно?

Вот jquery 

$( function(){
        $("#knotes > tbody > tr > td > input").bind('focus', function(){
            var row = $(this).closest("tr").get(0);
            if( row.className.indexOf("clicked")==-1 )
            {       
                    var rowCopy=$(row).clone(true);
                    $(row).closest("tbody").append(rowCopy);
                    row.className+="clicked";
                    var newInput=$("input",rowCopy).get(0);
                    newInput.id="newId";
                    $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
            }
        });
});

Вот разметка 

<table width="100%" cellpadding="0" cellspacing="0" id="knotes">
<thead bgcolor="#f7f9c9">
    <td align="center"><label for="name">Name</label></td>
    <td align="center" nowrap="nowrap"><label for="kot">OT </label></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><label for="kdt">DT </label></td>

    <td>&nbsp;</td>
    <td align="center"><label for="kbreak">Bk?</label></td>
    <td>&nbsp;</td>
    <td align="center"><label for="kshift">Shift</label></td>
    <td>&nbsp;</td>
</thead>

<tr>
    <td align="center" class="kac" id="test"><input type="text" id="kemployee" name="klabor[kemployee][]" /></td>

    <td align="center"><input type="text" name="klabor[kot][]"  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kdt][]"  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kbreak][]"  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kshift][]"  /></td>

</tr>
</table>

ЗДЕСЬ ПЕРЕСМОТРЕННЫЙ КОД Пересмотренный jQuery 

$( function(){
        $("#knotes > tbody > tr > td > input").bind('focus', function(){
            var row = $(this).closest("tr").get(0);
            if( row.className.indexOf("clicked")==-1 )
            {       
                    var rowCopy=$(row).clone(true);
                    $(row).closest("tbody").append(rowCopy);
                    row.className+="clicked";
                    var newInput=$("input",rowCopy).get(0);
                    newInput.id="newId";
                    $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
                    $('minus').live(function(){$(this).closest('tr').remove();});
            }
        });
});

Пересмотренная разметка 

<table width="100%" cellpadding="0" cellspacing="0" id="knotes">
<thead bgcolor="#f7f9c9">
    <td align="center"><label for="name">Name</label></td>
    <td align="center" nowrap="nowrap"><label for="kot">OT </label></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><label for="kdt">DT </label></td>

    <td>&nbsp;</td>
    <td align="center"><label for="kbreak">Bk?</label></td>
    <td>&nbsp;</td>
    <td align="center"><label for="kshift">Shift</label></td>
    <td>&nbsp;</td>
</thead>

<tr>
    <td align="center" class="kac" id="test"><input type="text" id="kemployee" name="klabor[kemployee][]"  /></td>

    <td align="center"><input type="text" name="klabor[kot][]" value=""  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kdt][]" value=""  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kbreak][]" value=""  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kshift][]" value="" /></td><td class="minus"><img src="/images/minus.png" /></td>

</tr>
</table>

Ответы [ 2 ]

1 голос
/ 09 октября 2009

Вы можете использовать метод jQuery live. 

$(".removeMe").live('click',function(){ 
  $(this).closest('tr').remove();
}

Теперь, когда вы добавляете или клонируете html-код, такой как <a class='removeMe'>(-) Remove</a>, jQuery устанавливает для него событие onclick.

Изменить: 

$( function(){

        $('.minus').live(function(){$(this).closest('tr').remove();});

        $("#knotes > tbody > tr > td > input").bind('focus', function(){
            var row = $(this).closest("tr").get(0);
            if( row.className.indexOf("clicked")==-1 )
            {       
                    var rowCopy=$(row).clone(true);
                    $(row).closest("tbody").append(rowCopy);
                    row.className+="clicked";
                    var newInput=$("input",rowCopy).get(0);
                    $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
            }
        });
});
1 голос
/ 09 октября 2009

да 

$('button').live(function(){$(this).closest('tr').remove();});

где «кнопка» - это селектор, представляющий вашу кнопку [-].

Кроме того, можно внести несколько изменений для оптимизации вашего кода (и сделать его более совместимым с браузерами): 

if( row.className.indexOf("clicked")==-1 )
row.className+="clicked";
newInput.id="newId";

должно стать: 

if (row.hasClass('clicked'))
row.addClass('clicked');
newInput.attr('id','newId');
...