mrmarkfrench
commented
4 years ago So I just tried this and it's working as expected for me.
Here's my dead-simple example. I took the demo.html file from the plugin and added the following to the end:
<script>
// Make sure we don't run this until after everything else has been loaded.
// Using the document click handler ensures that everything else is setup first,
// which ensures we're not cheating and adding our new element before the
// plugin attaches to form elements the first time.
$(document).on('click', function(){
// Step 1: Create a new element from a simulated AJAX request
var newInput = $('<input type="text" id="country_selector_ajax" name="country_selector_ajax">');
// Step 2: Add the new element to the page
$('form').append(newInput);
// Step 3: Run the plugin on the new element
$(newInput).countrySelect({ defaultCountry: 'au' });
// Step 4: Profit!
});
</script>This will add a new selector every time you click on the page, and they all get a handler added to them with a drop-down menu of flags.
fede72bari
I am experiencing that I cannot find the function .countrySelect in new elements added within an ajax request since the function really does not exist in new #countryN input tags. I thought it was a problem of scope, after exhausting attempts, at least for a beginner like me, I found that probably there is an event linked to the page load or ready so that just at the first-page load the whole countrySelect.js script attach the plugin function to many page elements including input tags. So my question is how can i get the same for the new elements that are added basically after clicking a SHOW MORE button? Is there a way to recall the function inside the countrySelect.js script that attaches the plugin countrySelect function? Or a way to trigger the event load/ready page? Thanks.