У меня проблемы с прохождением недавно добавленного элемента DOM с помощью jQuery

Question

У меня есть форма, которую я хочу использовать для добавления записей. Как только запись добавлена, исходная форма должна быть сброшена, чтобы подготовить ее к следующей записи, а сохраненная форма должна быть продублирована до сброса и добавлена ​​в элемент div для «сохраненных записей». Это работает (по большей части), но у меня проблемы с доступом к вновь созданной форме ... Мне нужно изменить атрибут значения кнопки отправки с «добавить» на «редактировать», чтобы правильно сообщить, что нажатие этой кнопки должно делать. вот моя форма:

  <div class="newTruck">
    <form id="addNewTruck" class='updateschedule' action="javascript:sub(sTime.value, eTime.value, lat.value, lng.value, street.value);">

        <b style="color:green;">Opening at: </b>
            <input id="sTime" name="sTime" title="Opening time" value="Click to set opening time" class="datetimepicker"/>

        <b style="color:red;">Closing at: </b>
            <input id="eTime" name= "eTime" title="Closing time" value="Click to set closing time" class="datetimepicker"/>

        <label for='street'>Address</label>
            <input type='text' name='street' id='street' class='text' autocomplete='off'/>
            <input id='submit' class='submit' style="cursor: pointer; cursor: hand;" type="submit" value='Add new stop'/>
        <div id='suggests' class='auto_complete' style='display:none'></div>
            <input type='hidden' name='lat' id='lat'/>
            <input type='hidden' name='lng' id='lng'/>

  </form>

 </div>

Я попытался использовать сто различных селекторов с jquery, но безрезультатно ... Вот мой сценарий в его нынешнем виде:

function cloneAndClear(){
    var id = name+now;
    $j("#addNewTruck").clone(true).attr("id",id).appendTo(".scheduledTrucks");
    $j('#'+id).filter('#submit').attr('value', 'Edit');

    $j("#addNewTruck")[0].reset();

    createPickers();
}

элемент правильно клонирован и вставлен в div, но я не могу найти способ получить доступ к этому элементу ... третья строка в скрипте никогда не работает.

Другая проблема, с которой я столкнулся, заключается в том, что «значения» в клонированной форме возвращаются к значению в источнике HTML, а не к тому, что вводит пользователь.

советы о том, как решить любую из этих проблем, с благодарностью!

Answer 1

Я думаю, что вы хотите использовать find не filter

$j('#'+id).find('#submit')

Это должно работать на практике, хотя у вас есть проблемы, потому что есть несколько элементов с одинаковым идентификатором. Я бы изменил ваш HTML для использования классов, или в данном конкретном случае вам не нужно:

$j('#' + id).find(":submit")

Answer 2

вы пробовали использовать .val()? и вместо .filter() используйте .find()

$j('#'+id).find(':submit').val('Edit');

Answer 3

Никф решение работает. (просто написал кусок кода, чтобы проверить это). Проверьте определение фильтра в документации jquery.

Сократить набор соответствующих элементов до тех, которые соответствуют селектору или проходят тест функции.

В этом случае вы должны использовать find. Также, как упомянул ник, наличие нескольких элементов с одинаковым идентификатором проблематично, особенно когда вы делаете манипуляции с dom. Лучше пойти с соответствующими классами.