Question

我有一个包含一些输入的侧边栏。我想把这些数据放到我的ajax中。我正在记录这些输入。但是，我没有得到任何东西。这是我做的：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
    $("#find_match").click(function() {
        alert("clicked");
    });
</script>

<aside>
    <br><br>
    Select Gender
    <select name="gender" id="gender">
        <option value="">Select</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
            
    <hr>
    Educational Qualification : 
    <select class="form-control" name="eduQualification" id="eduQualification" class="required">
        <option value="">Select</option>
        <option value="10">10th</option>
        <option value="12">12th</option>
        <option value="15">Graduate</option>
        <option value="17">Post Graduate</option>
    </select>
            
    <hr>
    Salary expectation (in rupees):
    <select class="form-control" name="salary" id="salary">
        <option value="">Select</option>
        <option value="1">Upto 1 lakh</option>
        <option value="2">Upto 1-2 lakhs</option>
        <option value="3">2-5 lakh</option>
        <option value="4">5-10 lakh</option>
        <option value="5">More than 10 lakh</option>
    </select>

    <br><br>
    <button id="find_match">Search matches </button>
    </aside>

＆＃13;

即使我的所有文件都存在，我也无法在控制台中获取任何数据。我有一个滑块，在我的html页面中，我想在jquery中获取它的值;为此，它说＆＃34; ui没有定义＆＃34;。

下面是片段 -

<label for="amount">Age range:</label>
                <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
                <div id="slider-range"></div>

js code -

<script>
    $(function() {
        $( "#slider-range" ).slider({
          range: true,
          min: 20,
          max: 60,
          values: [ 20, 30 ],
          slide: function( event, ui ) {
            $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
          }
        });
        $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
          " - " + $( "#slider-range" ).slider( "values", 1 ) );
        });
    </script>


    $("#find_match").click(function(){

  // I want to get the value of slider here..    
        var minAge = $('#amount').val(ui.values[ 0 ]);

});

我想...它给出了这个错误，因为它没有得到ui变量，它是slide（）中回调的一部分。如何解决这个问题？请帮忙。

Answer 1

如上面的评论所示，您需要等待DOM准备就绪。如果DOM未准备就绪，则无法将事件处理程序绑定到元素。

$(document).ready(function() {
    $("#find_match").click(function(){
        alert("clicked");
    });
});

您发布的新JavaScript的问题的第二部分搞砸了。您需要将代码的事件处理程序部分放在document.ready函数中。这应该是：

$(function() {
    $("#slider-range").slider({
      range: true,
      min: 20,
      max: 60,
      values: [ 20, 30 ],
      slide: function(event, ui) {
          $("#amount").val(ui.values[ 0 ] + " - " + ui.values[1]);
      }
    });

    // Took this out of the val() and put it in a var so it's easier to read
    var sliderVal = $("#slider-range").slider("values", 0) +
        " - " + $("#slider-range").slider("values", 1);
    $("#amount").val(sliderVal);

    // The code below must be within a document.ready, or the event
    // handler won't bind to the element because the DOM isn't ready!
    $("#find_match").click(function() {
        // I want to get the value of slider here..    
        var minAge = $('#amount').val(ui.values[ 0 ]);
    });
});

为什么此侧边栏数据不会转到ajax，为什么滑块值显示ui未定义？

1 个答案: