.de défilement() ne fonctionne pas jquery

Je suis en utilisant jQuery pour vérifier si un div défile à l'écran. Il fonctionne sur window, Mais il n'est pas de travailler sur des div.

Fonctionne très bien:

 $(window).scroll(function() {
    console.log('scroll happened');
 });

Pas Wokring Amende:

$('.ui-multiselect-checkboxes').scroll(function(){ 
    console.log('scroll happened');
});

HTML
Je suis avec ERIC Hynds Multiselect. Afin de défilement est présent sur son ul avec classe ui-multiselect-checkboxes. Vous pouvez voir en direct exemple ici

s'il vous plaît essayer la solution que je vous ai donné , j'ai essayé et ça marche

InformationsquelleAutor | 2014-03-07

1

Essayer:
```
$(document).on('scroll', '.ui-multiselect-checkboxes', function(){ 
    console.log('scroll happened');
}); 
```
C'est parce que ces éléments sont créés dynamiquement par multiselect plugin.
- Il ne fonctionne pas chers. J'ai même vérifié en changeant document à corps.
- Avez-vous écrit ce code dans le document prêt gestionnaire. Si non, s'il vous plaît ne
- déjà dans le document de prêt.
InformationsquelleAutor Ramesh
1

créer délégué événement, car ceux-ci sont créés dynamiquement par youe multiselect plugin.
```
$(document).on('scroll', '.ui-multiselect-checkboxes', function(){ 
    console.log('scroll happened');
}); 
```
InformationsquelleAutor user3352745

Essayer quelque chose comme cela

$(document).ready(function(){

    $('.ui-multiselect-checkboxes').bind('scroll',chk_scroll);
});


function chk_scroll(e)
{
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) 
    {
        console.log("Scrolled");
    }

}

InformationsquelleAutor jsduniya

Résolu

<script>
$(function() {
     $(".ui-multiselect-checkboxes").on('scroll', function () { 
       console.log('scroll happened'); 
      });
});
</script>

//OH J'AI VÉRIFIÉ SON TRAVAIL. Maintenant

Il suffit de cocher placer tous les fichiers que vous avez en tête de ce HTML ,il suffit de Créer un dossier et placer les fichiers en conséquence à l'intérieur de "jQuery MultiSelect Widget Demo_files" DOSSIER

Et de vérifier ensuite la console
//NOUVELLE SOLUTION

    <!DOCTYPE html>
<!-- saved from url=(0078)http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/jquery.multiselect.css">
<link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/style.css">
<link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/prettify.css">
<link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/jquery-ui.css">
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.js"></script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/prettify.js"></script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$("select").multiselect();
});
</script>
</head>
<body id="test" onLoad="prettyPrint();" cz-shortcut-listen="true">
<h2>Basic Demos</h2>
<p>Both multiselects are created with the following one-liner.  Optgroup support is built in out of the box:</p>
<pre class="prettyprint"><span class="pln">$</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"><br>&nbsp; &nbsp;$</span><span class="pun">(</span><span class="str">"select"</span><span class="pun">).</span><span class="pln">multiselect</span><span class="pun">();</span><span class="pln"> <br></span><span class="pun">});</span></pre>
<h3>Basic</h3>
<p>
<select title="Basic example" multiple="multiple" name="example-basic" size="5" style="display: none;">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option10">Option 10</option>
<option value="option11">Option 11</option>
<option value="option12">Option 12</option>
</select><button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all" title="Basic example" aria-haspopup="true" style="width: 225px;"><span class="ui-icon ui-icon-triangle-2-n-s"></span><span>Select options</span></button>
</p>
<h3>With Optgroups</h3>
<p>Click on an optgroup's heading to toggle the checked state of the entire group.</p>
<p>
<select name="example-optgroup" multiple="multiple" size="5" style="display: none;">
<optgroup label="Group One">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</optgroup>
<optgroup label="Group Two">
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
</optgroup>
</select><button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all" aria-haspopup="true" style="width: 225px;"><span class="ui-icon ui-icon-triangle-2-n-s"></span><span>Select options</span></button>
</p>
<div class="ui-multiselect-menu ui-widget ui-widget-content ui-corner-all" style="width: 217px;"><div class="ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix"><ul class="ui-helper-reset"><li><a class="ui-multiselect-all" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm#"><span class="ui-icon ui-icon-check"></span><span>Check all</span></a></li><li><a class="ui-multiselect-none" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm#"><span class="ui-icon ui-icon-closethick"></span><span>Uncheck all</span></a></li><li class="ui-multiselect-close"><a href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm#" class="ui-multiselect-close"><span class="ui-icon ui-icon-circle-close"></span></a></li></ul></div><ul class="ui-multiselect-checkboxes ui-helper-reset"><li class=" "><label for="ui-multiselect-0-option-0" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-0" name="multiselect_0" type="checkbox" value="option1" title="Option 1"><span>Option 1</span></label></li><li class=" "><label for="ui-multiselect-0-option-1" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-1" name="multiselect_0" type="checkbox" value="option2" title="Option 2"><span>Option 2</span></label></li><li class=" "><label for="ui-multiselect-0-option-2" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-2" name="multiselect_0" type="checkbox" value="option3" title="Option 3"><span>Option 3</span></label></li><li class=" "><label for="ui-multiselect-0-option-3" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-3" name="multiselect_0" type="checkbox" value="option4" title="Option 4"><span>Option 4</span></label></li><li class=" "><label for="ui-multiselect-0-option-4" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-4" name="multiselect_0" type="checkbox" value="option5" title="Option 5"><span>Option 5</span></label></li><li class=" "><label for="ui-multiselect-0-option-5" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-5" name="multiselect_0" type="checkbox" value="option6" title="Option 6"><span>Option 6</span></label></li><li class=" "><label for="ui-multiselect-0-option-6" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-6" name="multiselect_0" type="checkbox" value="option7" title="Option 7"><span>Option 7</span></label></li><li class=" "><label for="ui-multiselect-0-option-7" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-7" name="multiselect_0" type="checkbox" value="option8" title="Option 8"><span>Option 8</span></label></li><li class=" "><label for="ui-multiselect-0-option-8" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-8" name="multiselect_0" type="checkbox" value="option9" title="Option 9"><span>Option 9</span></label></li><li class=" "><label for="ui-multiselect-0-option-9" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-9" name="multiselect_0" type="checkbox" value="option10" title="Option 10"><span>Option 10</span></label></li><li class=" "><label for="ui-multiselect-0-option-10" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-10" name="multiselect_0" type="checkbox" value="option11" title="Option 11"><span>Option 11</span></label></li><li class=" "><label for="ui-multiselect-0-option-11" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-11" name="multiselect_0" type="checkbox" value="option12" title="Option 12"><span>Option 12</span></label></li></ul></div><div class="ui-multiselect-menu ui-widget ui-widget-content ui-corner-all" style="width: 217px;"><div class="ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix"><ul class="ui-helper-reset"><li><a class="ui-multiselect-all" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm#"><span class="ui-icon ui-icon-check"></span><span>Check all</span></a></li><li><a class="ui-multiselect-none" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm#"><span class="ui-icon ui-icon-closethick"></span><span>Uncheck all</span></a></li><li class="ui-multiselect-close"><a href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm#" class="ui-multiselect-close"><span class="ui-icon ui-icon-circle-close"></span></a></li></ul></div><ul class="ui-multiselect-checkboxes ui-helper-reset"><li class="ui-multiselect-optgroup-label "><a href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm#">Group One</a></li><li class=" "><label for="ui-multiselect-2-option-0" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-0" name="multiselect_2" type="checkbox" value="option1" title="Option 1"><span>Option 1</span></label></li><li class=" "><label for="ui-multiselect-2-option-1" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-1" name="multiselect_2" type="checkbox" value="option2" title="Option 2"><span>Option 2</span></label></li><li class=" "><label for="ui-multiselect-2-option-2" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-2" name="multiselect_2" type="checkbox" value="option3" title="Option 3"><span>Option 3</span></label></li><li class="ui-multiselect-optgroup-label "><a href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm#">Group Two</a></li><li class=" "><label for="ui-multiselect-2-option-3" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-3" name="multiselect_2" type="checkbox" value="option4" title="Option 4"><span>Option 4</span></label></li><li class=" "><label for="ui-multiselect-2-option-4" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-4" name="multiselect_2" type="checkbox" value="option5" title="Option 5"><span>Option 5</span></label></li><li class=" "><label for="ui-multiselect-2-option-5" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-5" name="multiselect_2" type="checkbox" value="option6" title="Option 6"><span>Option 6</span></label></li><li class=" "><label for="ui-multiselect-2-option-6" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-6" name="multiselect_2" type="checkbox" value="option7" title="Option 7"><span>Option 7</span></label></li></ul></div><div class="ugdv_contextMenu" id="ugdv_myMenu" style="display: none;"><ul id="ugdv_contextMenu"><li id="ugdv_menuItem_google_docs">Open in Google Docs Viewer</li><li id="ugdv_menuItem_new_tab">Open link in new tab</li><li id="ugdv_menuItem_new_window">Open link in new window</li><li id="ugdv_menuItem_new_incognito">Open link in new incognito window</li><li class="ugdv_seperator"></li><li id="ugdv_menuItem_download_file">Download file</li><li id="ugdv_menuItem_copy">Copy link address</li><li id="ugdv_menuItem_editpdf">Edit PDF File on PDFescape.com</li></ul></div><div id="ugdv_jqContextMenu" style="display: none; position: absolute; z-index: 9999;"></div><div style="background-color: rgb(0, 0, 0); position: absolute; opacity: 0.2; z-index: 9998; display: none;"></div>
<script>
$(function() {
$('ul').click(function(){
var className=$(this).attr("class");
});
$("."+className).on('scroll', function () { 
console.log('scroll happened'); 
});
});
</script>
</body></html>

.de défilement() ne fonctionne pas jquery

Dois-je également Expliquer la logique derrière cela?/
il est également ne fonctionne pas
vous avez ajouté de classe en classe pour sélectionner manuellement mais dans mon cas, il est créé dynamiquement
Nom de la classe dont vous parlez?
ui-multiselect-cases à cocher de la classe est ajouté dynamiquement. Comme je suis seulement en ajoutant de sélectionner la zone et de la renseigner sur l'ouverture à l'événement
fournir jsfiddle
Maintenant j'ai mis à jour la réponse =>Maintenant travailler avec des classes dynamiques
J'ai travailler en appelant la fonction de défilement à l'intérieur de son beforeOpen événement. De sorte que son travail avec elle. Selon votre méthode, il ne fonctionnera pas. Merci pour votre temps

InformationsquelleAutor Pratik

Vous devez vous connecter pour publier un commentaire.