Добавить div вне родителя ввода

Question

Im довольно новый для javascript, и я просто не могу понять этого, несмотря на мою попытку исследования. Как отслеживать изменение ввода в div и запускать добавление к внешнему div? Мой код идет следующим образом:

Append h3 с "В ожидании" когда-то ".image значение" вход имеет изменение значения

<!-- APPEND <h3> --> 
<h3>Best Overall Costume<div class="pending">Pending</div></h3> 
<div> 
    <div class="select-form"> 
    <img src="images/vote.jpg" data-value="image_value"> 
    <img src="images/vote.jpg" data-value="image_value2"> 
    <img src="images/vote.jpg" data-value="image_value3"> 
    <img src="images/vote.jpg" data-value="image_value4"> 
    <img src="images/vote.jpg" data-value="image_value5"> 
    <!-- Track the change of this input --> 
    <input type="hidden" class="image-value" name="selected_image" value=""> 
    </div> 
</div> 

Я попытался это:

function changeStatus(statusValue) { 
    $("input",".select-form").val(statusValue).trigger("change"); 
} 

$("input",".select-form").change(function(){ 
    if (!$(this).val()){ 
     $("<div class='pending'>Pending</div>").appendTo($("h3").prev($(this))); 
    } 
}); 

Но это Бесполезный Кажется, он работает. Есть идеи?

Answer 1

Поместите пустой div, где вы хотите свой новый div, и дайте ему идентификатор i.e (<div id='myDiv'><div>), а затем добавьте то, что вы хотите, как это.

$("#myDiv").append("<div class='pending'>Pending</div>"); 

Вы также можете проверить Append Explained

для более объяснений.

Спасибо.

Answer 2

попробовать это:

$("input",".select-form").on("change", function(){ 
    var $this = $(this); 
    if (!$this.val()){ 
      var elem = $('<h3>Best Overall Costume<div class="pending">Pending</div></h3>');     
      $this.parent().parent().before(elem); 
    } 
}); 

вы можете также разместить чек, что если ожидающий ДИВ уже добавлен, чтобы не добавить его снова.

Конечно, это решение предполагает, что не существует никаких других вложенных дивы между целевой DIV (до которого вы хотите добавить) и управляющий вход

Answer 3

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

Тогда я не знаю, для чего была проверка val, поэтому я отменил ее.

Наконец, я использую one(), который работает только один раз. Казалось, этот случай требует этого.

$('.select-form').one('change', 'input', function() { 
    if ($(this).val()) { alert('asdgf'); 
     $("<div class='pending'>Pending</div>") 
      .appendTo($(this).parent().prev('h3')); 
    } 
}); 

Fiddle