5

当 DOM选择元素完成加载时，是否有在 JQuery 中使用的事件处理程序？这就是我想要实现的。它正在处理除“加载”之外的其他事件。

这段代码被加载到头部。

$(document).on('load', 'select', function(){
    var currentSelectVal = $(this).val();
    alert(currentSelectVal);
    } );

这个问题很早就形成了。我需要将事件处理程序附加到所有选择元素，它们都在加载文档时出现并稍后动态创建。

它们从 JQuery Post 加载到 php 页面。与此类似：

$.post("./user_functions.php", 
{reason: "get_users", userID: uID}) 
.done(function(data) { $("#userSelector").html(data);
 });
4

7 回答 7

9

我想我们都很困惑。但是快速分解您的选择。
在对问题进行更新后，您可能寻求的答案似乎是我的最后一个示例。请同时考虑所有其他信息，因为它可能会帮助您确定更好的“最终目标”流程。

首先，您有另一个答案中指出的 DOM Load 事件。这将在页面完成加载时触发，并且应该始终是您在 HEAD JavaScript 中的第一个调用。要了解更多信息，请参阅此 API 文档。

例子

$(document).ready(function () {
    alert($('select').val());
})
/*  |OR|    */
$(function() {
    alert($('select').val());
})

然后你有可以附加到选择元素的事件，例如“change”、“keyup”、“keydown”等......通常的事件绑定是“change”和“keyup”，因为这两个是最常见的结束用户期望“改变”的事件。要了解更多信息，请阅读 jQuery 的.delegate()（仅限 1.6 及以下版本）、.on()、.change() 和.keyup ( )。

例子

$(document).on('change keyup', 'select', function(e) {
    var currentSelectVal = $(this).val();
    alert(currentSelectVal);
})

现在delegating对文档的更改事件不是“必要的”，但是，它确实可以省去以后的麻烦。委托允许未来的元素（未在 DOM 加载事件上加载的东西），满足选择器资格（exp. 'select'、'#elementID' 或 '.element-class'）自动将这些事件方法分配给它们。

但是，如果您知道这不会成为问题，那么您可以使用事件名称作为 jQuery 元素对象方法，并使用更短的代码。

例子

$('select').change(function(e) {
    var currentSelectVal = $(this).val();
    alert(currentSelectVal);
})

最后一点，在某些 Ajax 调用期间还会发生“成功”和“完成”事件。所有 jQuery Ajax 方法都以一种或另一种方式具有这两个事件。这些事件允许您在 Ajax 调用完成后执行操作。

例如，如果您想在进行 Ajax 调用之后获取选择框的值。

例子

$.ajax({
    url: 'http://www.mysite.com/ajax.php',
    succuess: function(data) {
        alert($("select#MyID").val());
    }
})
/*  |OR|    */
$.post("example.php", function() { alert("success"); })
.done(function() { alert($("select#MyID").val()); })
/*  |OR|    */
$("#element").load("example.php", function(response, status, xhr) {
    alert($("select#MyID").val());
});

更多阅读：

还有一点要记住，所有 jQuery Ajax 方法（如 .get、.post）只是$.ajax({ /* options|callbacks */ })!

于 2013-06-25T12:59:12.037 回答
3

你为什么不直接使用：

$(document).ready(function () {
   //Loaded...
});

还是我错过了什么？

于 2013-06-25T12:50:24.937 回答
1

对于您的动态selects，您可以将警报放在回调中。

在你的.post()回调函数中，试试这个：

.done(function(data) {
    data = $(data);
    alert(data.find("select").val());
});
于 2013-06-25T12:59:38.283 回答
1

好的，如果我理解错了，请纠正我。因此，您希望在加载文档时以及在通过 ajax 调用获得一些新数据之后对选择执行一些操作。这是您如何完成此操作的方法。

首先在文档加载时执行，所以，

<script>
//This is the function that does what you want to do with the select lists
function alterSelects(){
 //Your code here
}
  $(function(){
      $("select").each(function(){
           alterSelects();
      });
  });
</script>

现在，每当您有一个 ajax 请求时，都会调用 ajaxSend 和 ajaxComplete 函数。所以，在上面加上这个：

$(document).ajaxSend(function () {
}).ajaxComplete(function () {
    alterSelects();
});

请求完成后，上面的代码将立即触发。但是我认为您可能希望在对从 ajax 调用返回的结果执行某些操作后执行此操作。你必须在你的 $.post 中这样做：

$.post("yourLink", "parameters to send", function(result){
    // Do your stuff here
    alterSelects();
});
于 2013-06-25T13:10:47.753 回答
0

如果您的选择元素是动态加载的，为什么不在处理响应后添加事件处理程序？

例如对于 ajax

$.ajax({
  ...
  success: function(response) {
   //do stuff 
   //add the select elements from response to the DOM 
   //addMyEventHandlerForNewSelect();

   //or

   //select the new select elements from response
   //add event handling on selected new elements
  },
  ...
});
于 2013-06-25T13:00:04.100 回答
0

您希望在加载用户选择时检查所有选择，还是只检查用户选择？...

$.post("./user_functions.php", {reason: "get_users", userID: uID}).done(function(data) {  
    $("#userSelector").html(data);
    //Then this:
    var currentSelectVal = $("#userSelector").val();
    alert(currentSelectVal);
});
于 2013-06-25T13:28:28.130 回答
0

我的解决方案与上面的海报有点相似，但使用了观察者（pubsub）模式。您可以在 Google 上搜索各种 pub 子库，也可以使用 jQuery 的自定义事件。这个想法是订阅主题/自定义事件并运行附加事件的函数。当然，最好过滤掉之前已经初始化的那些元素。我没有测试以下代码，但希望你能明白。

function attachEventsToSelect(html) {
    if (!html) { // html is undefined, we loop through the entire DOM we have currently
        $('select').doSomething();
    } else {
        $(html).find('select').doSomething(); // Only apply to the newly added HTML DOM
    }
}

$(window).on('HTML.Inserted', attachEventsToSelect);

// On your ajax call
$.ajax({
    success: function(htmlResponse) {
        $(window).trigger('HTML.Inserted', htmlResponse);
    }
});

// On your DOM ready event
$(function() {
    $(window).trigger('HTML.Inserted'); // For the current set of HTML
});
于 2014-02-07T11:51:17.330 回答