Что случилось с этим утверждением JQuery

В основном я следующееЧто случилось с этим утверждением JQuery

$("#amount").keyup(function() { 
    if($(this).val() != "") { 
     alert($(this).closest("form").find('input[id="price"]').val()); 
    } 
});

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

<form class="submitOrder" method="POST"> 
    <fieldset> 
     <div class="form-group"> 
      <label>Amount</label> 
      <input type="text" class="form-control" id="amount"> 
     </div> 
     <div class="form-group"> 
      <label>Price</label> 
      <input type="text" class="form-control" id="price" value="$1" disabled=""> 
     </div> 
    </fieldset> 
</form>

Согласно этому утверждению, $(this).val() всегда возвращает пустое значение, означающий alert не будет обработана, почему это?

Мой точный HTML макете в JSFiddle: http://jsfiddle.net/7PPBq/3/

источник

2013-10-28 Curtis

Вы оставили из элемента, что функция указывает ссылка. Отправьте также HTML. –

- # значение входного значения? – ryanlutgen

Что такое '# amount' текстовое поле? Покажите HTML, с которым вы пытаетесь взаимодействовать. Это облегчит ответ на ваш вопрос. Еще лучше создать jsfiddle, демонстрирующий вашу проблему. – ahsteele

Я вижу 2 проблемы:

У вас есть множество применений одного и того же идентификатора для обоих 'цена' и 'суммы'. Идентификаторы должны быть уникальными. Возможно, вы захотите указать входы атрибут имени вместо или в дополнение к id, так как имя будет таким, как ввод идентифицируется в сообщении.
html был недействительным. В форме есть divs, которые не заканчиваются там, где они должны.

See this fiddler for a working example.

<div class="row row-offcanvas row-offcanvas-right"> 
    <div class="col-xs-12 col-sm-7"> 
     <div class="row"> 
       <div class="col-7"> 
        <ul class="nav nav-tabs" id="myTab"> 
       <li class="active"><a href="#facebook" data-toggle="tab">Facebook</a></li> 
       <li><a href="#twitter" data-toggle="tab">Twitter</a></li> 
       <li><a href="#youtube" data-toggle="tab">YouTube</a></li> 
       <li><a href="#instagram" data-toggle="tab">Instagram</a></li> 
      </ul> 

      <div class="tab-content"> 
       <div id="ajaxResponse"></div> 
       <div class="tab-pane active" id="facebook"> 
        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <h3 class="panel-title">Create Order</h3> 
         </div> 
         <div class="panel-body"> 
          <form class="submitOrder" method="POST"> 
           <fieldset> 
             <label for="fname">Amount</label> 
             <input type="text" class="form-control" id="amount"> 

             <label for="fname">Price</label> 
             <input type="text" class="form-control" id="price" value="$1" disabled> 
           </fieldset> 
          </form> 
         </div> 
        </div> 
      </div> 
      </div> 
     </div><!--/span--> 
    </div><!--/row--> 
</div>

источник

2013-10-28 02:52:47

Я не вижу здесь никакой проблемы. Вы импортировали библиотеку jQuery?

<script type="text/javascript" src="/js/jquery191.js"></script>

http://jsfiddle.net/whyach/LDYxD/

источник

2013-10-28 02:38:01 Felix

Если jQuery не был импортирован, возникла консольная ошибка, противоположная тому, что указано OP. –

OP ничего не сказал с консоли. Почему вы предполагаете, что на консоли нет ошибки? – Felix

читать комментарии –

Вы не можете иметь более одного элемента, которые разделяют точно такой же ID

Изменить все id="amount" к class="amount".

Изменить все id="price" по class="price".

Меняйте JS для:

$(".amount").keyup(function() { 
    if($(this).val() != "") { 
     alert($(this).closest("form").find(".price").val()); 
    } 
});

источник

2013-10-28 02:55:31

Попробуйте сделать это:

$("#amount").keyup(function() { 
    if($(this).val() != "") { 
     alert($(this).parents('.tab-pane').find('input[id="price"]').val()); 
    } 
});

скрипку here

источник

2013-10-28 03:25:04 Stiger

Что случилось с этим утверждением JQuery

ответ

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