We Keep Coding

JQuery trigger('input') does not fire native JavaScript input event

I have a code which needs to trigger the input event manually on an input with a datepicker.
The code looks like:
input.on('apply.daterangepicker', function(e) {
input.trigger('input');
});
input.on('input', function(e) {
console.log('11111111111111111111');
});
document.getElementById('filter-created-at').addEventListener('input', function(e) {
console.log('22222222222222222222');
});
The first jQuery event listener works fine. But the second pure JavaScript does not catch the input event. Don't understand it. How can I catch input from trigger() with pure JavaScript addEventListener()?

You can use Element#dispatchEvent to trigger an input event.
document.getElementById('filter-created-at').addEventListener('input', function(e) {
console.log('Regular input');
});
$('#filter-created-at').on('input', function(e) {
console.log('jQuery input');
});
document.getElementById('filter-created-at').dispatchEvent(new Event('input', {
bubbles: true
}))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="filter-created-at" />

JQuery anchor link selector issue

I'm trying to select the list anchor link using jquery. Though 'list' link doesn't exist in the page as shown in the console output, it seems 'click' is still getting triggered. What could be causing 'list' and 'add' to trigger?
I have this simple code using jquery 1.10.2:
<!-- List -->
Delete
Add
<script>
jQuery(document).ready(function($) {
if ($('a[href$="#list"]').length>0){
console.log('list found');
}else{
console.log('list not found');
}
function opentab(value){
console.log('opentab: ' + value );
//perform task here
}
$(document).on('click', 'a[href="#list"]', opentab('list'));
$(document).on('click', 'a[href="#add"]', opentab('add'));
});
</script>
console output:
list not found
opentab: list
opentab: add
Here's jsfiddle link: http://jsfiddle.net/2FHf6/

you need to declare a function in the event that when this event occurs call this function, currently the method inside event is called on page load as your way of calling is not right:
do like this:
$(document).on('click', 'a[href="#list"]', function(){
opentab('list')
});
$(document).on('click', 'a[href="#add"]', function(){
opentab('add')
});
UPDATED FIDDLE

$(document).on('click', 'a[href="#list"]', function(e){
opentab('list');
});
$(document).on('click', 'a[href="#add"]', function(e){
opentab('add');
});
Demo:
http://jsfiddle.net/XJhN6/

See this updated fiddle.
When you want to call a function on an event triggered and the function needs to pass values, you have to do it in an "wrapper" function, like this:
jQuery(document).ready(function($) {
if ($('a[href$="#list"]').length>0){
console.log('list found');
}else{
console.log('list not found');
}
function opentab(value){
console.log('opentab: ' + value );
//perform task here
}
$(document).on('click', 'a[href="#list"]', function() {
opentab('list');
});
$(document).on('click', 'a[href="#add"]', function() {
opentab('add');
});
});
Otherwise it will be called when the event listener is set, not on the actual event.

onclick function for input checkbox - check on page load and also on click

I have this code:
$('input.ShowResellerAccounts').on('click', function(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
which hides/shows a table tbody id on click.
how can i make this code run on page load as well as on click?

In the document.ready function you can trigger the click event like
$('input.ShowResellerAccounts').trigger('click');

Separate it into a function and bind in on load as well as on click:
function checkInput(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
$(document).ready(function() {
$('input.ShowResellerAccounts')
.on('click', checkInput) // bind to click
.each(checkInput); // call now
});

u can use $(document).ready :
$(document).ready(function(){
//put your code here
});

jquery change sometimes event prevents click event

In the following example, there is a simple input field and a button.
<body>
<input type="text" id="in">
<input type="button" value="click" id="button">
</body>
There is a change-event-function on the input field and a click-event-function on the button.
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
//window.alert('change event');
});
$('#button').click(function() {
console.log('click event');
});
});
On changing the value of the input field and immediately clicking the button (without leaving the cursor), my expectation is, that both events are fired. Unfortunately this behavior depends on the code executed inside the change-function e.g. on uncommenting the window.alert line, the click event is NOT fired - or the click-event-function is not executed. Why? How can I avoid code, which prevents the click-event-function from executing?
Update:
instead of the window.alert, the jquery.hide has the same effect
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
$('#hide').hide();
});
$('#button').click(function() {
console.log('click event');
});
});

If you want to fire both of two events, you can do like this:
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
window.alert('change event');
$('#button').click();
});
$('#button').click(function() {
console.log('click event');
});
});

Try
$(document).mousedown(function(e){
console.log('click event');
});
The mousedown event will occur before textbox change and click events so that you need to set time out and check the changed value of the text box if required.

Jquery: block onclick div action when click in other object inside

I have this situation: http://jsfiddle.net/Lm7ac/4/
$(".more").hide();
$(document).on("click", ".btn",function() {
alert("hello");
});
$(document).on("click", "div.post",function() {
var morediv = $(this).find(".more");
morediv.slideToggle('fast');
});
I need to keep ".more" closed(or open) when click in ".btn".
How can i do that?
Thanks

Use event.stopPropagation():
$(document).on("click", ".btn",function(event) {
event.stopPropagation();
alert("hello");
});
...note the event argument to the callback, make sure to include it as above.
http://jsfiddle.net/KJ5Uv/
Cheers

Just return false at the end of the .btn click event handler.
$(document).on("click", ".btn",function() {
alert("hello");
return false;
});
When you return false in a jQuery event handler it's like calling event.preventDefault() as well as event.stopPropagation() at the same time.
Here is a demo: http://jsfiddle.net/Lm7ac/5/
Docs for event.preventDefault(): http://api.jquery.com/event.preventDefault/
Docs for event.stopPropagation(): http://api.jquery.com/event.stopPropagation/