dev question

[barabasis]

Hello,

since the last recent 2 versions of ASP we can’t make our heart (see highlighted in blue attached) to work properly.
When I click on it it ignores the loaded functions and instead it opens up the thumbnail link.

Our developer has serious difficulties and asked us a question for you (see attached).

Could you pls get us an elaborate answer pls so to fix this once per all (cause it always happens on every update that we got problems) ?

Thanks

[Ernest Marcinko]

Hi,

Please note that this is not a plugin related issue, but a custom development questions, but I will try to give the best possible answer.

Can you please add a link, where I can see the search bar? The solution highly depends on how that icon is exactly placed and implemented to the results.

One issue I am seeing with the code, that dynamic jQuery event handlers should be attached to the closest parent of the changing element. In the code on the screenshot it is attached to the document, however attaching it to the results container would work much better:

jQuery('.asp_r').on('click', '.fa-heart', function(e){
	e.preventDefault();
	e.stopPropagation();
	e.stopImmediatePropagation();
	console.log('click');
});

The bubbling events need to be stopped from propagating as well, as you can see from the above code – otherwise it will trigger the click event.

[barabasis]

Hello Ernest,

first of all thanks a lot for having answered despite it’s out of the topic.
I can assure you that this is very important for us and also that it’s much appreciated.

Our developer told us the following attached, in order as it’s renamed.

How can we solve the situation? Do you have some advices?

Thanks
Kind regards

• This reply was modified 4 years, 6 months ago by barabasis.

[barabasis]

Sorry, the first 1.png attachment was wrong 😉 Pls delete it as it’s private info. Sorry about that.

[Ernest Marcinko]

Once again, if I am not able to see how this is implemented, at least the search and the results list, I am not able to help.

I understand your “developer” tries everything via jQuery, but we are using native javascript handlers to handle the clicks. jQuery can handle some cases, but everything depends on how and where the icon is placed exactly.

If the jQuery dynamic event handler can not handle this, he should have tried native mutation observers maybe:

var observer = new MutationObserver(function(){
	document.querySelectorAll('.asp_r .item .fa-heart').forEach(function(el){
		el.addEventListener('click', function(e){
			e.preventDefault();
			e.stopPropagation();
			e.stopImmediatePropagation();
			console.log('click');
		});
	});
});
document.querySelectorAll('.asp_r').forEach(function(parent){
	observer.observe(parent, { attributes: false, childList: true, subtree: true });
});

..or there is also an event triggered whenever the results are displayed, he can use that as well to attach the event listeners:

jQuery('.asp_m').on('asp_results_show', function(){
	jQuery('.fa-heart').off('click').on('click', function(e){
		e.preventDefault();
		e.stopPropagation();
		e.stopImmediatePropagation();
		console.log('click');
	});
});

[Author]

Posts