2015-12-15 4 views
1

Я бы хотел заполнить поле динамически созданных аккордеонных панелей в модели jquery-аккордеона. Поле должно быть заполнено информацией из основного поля вопроса. Я могу создать динамические панели с функцией jquery, но у меня возникли проблемы с заполнением поля панели данными из основного текстового поля в моей программе (вверхуJQuery аккордеон: заполнение текстовых полей в динамически создаваемых панелях

Я могу сделать обратное, т.е. заполнить . основное поле с полем панели с нажатием кнопки «Изменить»

Вот результат: https://jsfiddle.net/0fysejrh/1/

Мой код выглядит следующим образом:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Accordion - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script> 
    var counter = 3; 
    $(function() { 
    $("#accordion").accordion({ 
     collapsible: true, 
     active: false, 
     }); 
    collapsible: true; 

    function edit(){ 
    var text = $(this).siblings("input[type=text]").val(); 
    var sql = $(this).siblings('textarea').val(); 
    $("#input").val(text); 
    } 
    $(":button").click(edit); 

    $("#addAccordion").click(function() { 
     var newDiv = '<div><h3>Question '+ counter +'</h3></div>'; 
     var content = '<div class = "new_panel"><label for="in" name="question">Edit Question:</label> <input type="text" name = "question" /><br><br>' + 
     '<br><br> <input type = "button" value = "Edit" ></input></div>'; 
     $("#accordion").append(newDiv +content) ; 
     $("#accordion").accordion("refresh"); 
     $(".new_panel").children("input[type=text]").val()==$("#input").val(); 

     counter++; 
     $(":button").click(edit); 
    }); 
    }); 
    </script> 
</head> 
<body> 

<center> 
<form id="myform"> 
    <label>Enter Question:</label> 
    <input id="input" type="text" name = "questions"/> 
    <br><br> 
    <input id = "submitbutton" type="submit" value="Submit"/> 
    <input type = "button" id ="addAccordion" value = "Add Question" ></input> 
</form> 
</center> 

<div id = "accordion"> 
    <h3> Question 1 </h3> 
    <div> 
     <form> 
      How many times a day do you take ventolin ? 
      <br><br> 

      <label for="in" name="question">Edit Question:</label> 
      <input type="text" name = "question" /> 

      <br><br> 
      <input type = "button" value = "Edit" ></input> 

      </form> 
    </div> 
    <h3> Question 2 </h3> 
    <div> 
     <form> 
      Have you ever been tested for an STI? 
      <br><br> 
      <label for="in" name="question1">Edit Question:</label> 
      <input type="text"/> 
      <br><br> 
      <input type = "button" value = "Edit" ></input> 
      </form> 
    </div> 

</div> 
</body> 
</html> 

проблема заключается в том, что следующий строка кода не wo гк:

$(".new_panel").children("input[type=text]").val()==$("#input").val(); 

где «.new_panel» это имя класса, который я сделал динамически, и „#INPUT“ является уникальным идентификатором основного текстового поля.

Я пробовал использовать класс i.d. новой панели, но это, похоже, не работает. Может ли кто-нибудь указать мне в правильном направлении?

ответ

1

Что вы можете сделать, это сохранить значение входа в переменной, а затем ввести его в качестве части newDiv

var inputVal = $("#input").val(); 
var newDiv = '<h3>Question '+ counter +'</h3>'; 
var content = '<div class = "new-panel"><label for="in" name="question">Edit Question:</label> <input type="text" name = "question" value="'+inputVal+'" /><br><br>'+ '<br><br> <input type = "button" value = "Edit" ></input></form></div>'; 
$("#accordion").append(newDiv +content) ; 
$("#accordion").accordion("refresh"); 
counter++; 
$(":button").click(edit); 

вы где также с помощью == Вы должны помнить, что это сравнение не оператор присвоения

https://jsfiddle.net/nyye5bmg/

Смежные вопросы