All geek questions in one place

Document.ready () for $ (html) / $. ajax

I use jQuery to attach some plugins in the $ (document) .ready () handler - for example, $ (". Date"). datepicker (). However, when I load content using $ ("... html ..."), for example, from $ .ajax (.., success (data) {}) or from ajaxForm ({target: ...}) , document.ready () is obviously not being called. UPDATE: as indicated, it is calledbut still I don’t know which part / element was loaded.

I cannot just do ready () again, because it will reconnect the plugins to the existing elements again. Therefore, I must do this manually in each case, for example, I am doing successful (data) {item = $ (data); initDatePickerEtc (item); }.

Is there a better way?

There's a Live Query plugin that does this for events. Is there something that will allow me to track the creation of HTML elements and perform actions? Sort of

$.oncreation(".date", function() { $(this).datepicker(); });
// or at least
$.oncreation(function() { $(this).find(".date").datepicker(); });

It’s great if it also processes existing elements ... for example, Live Query works both for existing elements during the click () call and for elements created in the future.

Please note that I will be happy to track only elements created by jQuery. Thus, either jQuery provides an extension point for its html () function or not, I think. Now from jQuery sources this is not happening:

html: function( value ) {
    return value === undefined ?
        (this[0] ?
            this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g, "") :
            null) :
        this.empty().append( value );
},

, html() , 3- (, ajaxForm) ( $.creation), jQuery... ? - html(), append() ..... , $("")... datepicker().

+3
3

, html $(document).ready(). , , html.

+2

, , , W3C, DOMNodeInserted DOMNodeRemoved , ( IE ), - .

, live() , event , . ,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<title>Demo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$(function() {
    $('.picker').datepicker();

    $('button').click(function() {
      $(this).prev().before('<br/><input type="text" class="picker" />');
    });

    $('div.container').click(function(e) { 
      var target = $(e.target);    
      if (target.hasClass('picker') && !target.hasClass('hasDatepicker')) { 
        $(e.target).datepicker().datepicker('show'); 
      }
    });
});
</script>
</head>
<body>
<div class="container">
<input type="text" class="picker" />
<br/>
<button>Add a new input</button>
</div>
</body>
</html>

event.target <div>, , picker, hasDatepicker ( datepicker ), event.target , , datepicker('show') . event.target , , event.target picker , .

datepicker, , , .

+2

, , jQuery. - :

function AttachPlugins(jq) {
  jq.Find('.date').datepicker();
  // other stuff
}

:

$(document).ready(function(){
  AttachPlugins($(body));
});

Ajax

var newElement = $(html);
AttachPlugins(newEleemnt);

It is not fully automated, but it should not be. Ajax HTML should be considered "fresh" and unprocessed. Automatically attaching plugins might cause me to invoke how SQL triggers do it. At least with my approach, you reuse the same code that is used to attach plugins to the finished one.

0
source

Source: https://habr.com/ru/post/1720497/

More articles:


All Articles