Question

我是Jquery和Ajax的新手。我试图使用良好的形式，并将我的Ajax函数调用保存在一个单独的文件中。我的文件目前包含下面描述的一个函数：

$("form#click").submit(function(){
     myArray =$("option.asmOptionDisabled");
     tids = []
     $.each(myArray, function(i, val) {
       tids[i] = val.value;
     });
     $("#uberloading").css("display","block");
     tids = tids.join(',%20');

     date_start = $(".date-start")[0].value;
     hour_start = $(".hour-start")[0].value;

     date_end = $(".date-end")[0].value;
     hour_end = $(".hour-end")[0].value;



     $.ajax({
        url: '/saffron_main/click_out_display?tids='+tids+'&date-start='+date_start+'&hour-start='+hour_start+'&date-end='+date_end+'&hour-end='+hour_end,
        success: function (data) {
            $('#graph').html(data);
            $("#uberloading").css("display","none");
        }
    }); 
});

但是，当我将此文件加载到没有单击类的表单元素的页面上时，我收到一个错误，指示您无法在null元素上调用.submit函数。如何确保仅在类单击时存在表单元素时才加载该函数？

Answer 1

首先，form#click是一个包含id="click"的表单（不是class，正如问题文字所示）。

但真正的问题并不在于没有这样的形式 - jQuery没有问题，你的处理程序根本就没有附加，但就是这样。

问题是表达式$("form#click")本身不会产生jQuery对象。造成这种情况的原因有两个：

jQuery没有正确地包含在提供此错误的页面中，在这种情况下包括它将解决问题。
此代码在jQuery包含在您的页面之前运行，在这种情况下，在包含jQuery的<script>标记之后移动它将解决问题。

Answer 2

我倾向于使用.length()方法来检测元素是否存在

$(document).ready(function(event) {
    if ($("form#click").length) {
         // your submit event listener logic here - or call to a function
         // containing your event listener logic (cleans up doc ready a bit)
    }
});

这样，只有在页面上找到匹配元素时才加载事件监听器。

仅在元素存在时使用Jquery函数（Ajax调用）

2 个答案: