Develop Reference

Can Svelte select elements contain buttons?

I'm trying to insert buttons into select items such as this. I'd like each element to have a button so that a different action can be taken if the button is clicked, such as removing that item from the list. If I put the code for the button in the label field then the button shows up but it doesn't handle the on:click directive.

first try css , test peroperty z-index: 9999; for close button .
if css peroperty not working try to console.log('someting') if close button with click event in javascript ; and if you got console.log('someting');
now you can write fucntion to close your item;
i hope i can alitel help;

No you can't do this.
This library expects the value to be a string, at most a html script for some extra styling, but you cannot add interactions like that.
The code you have is similar to do doing:
<script>
const str = "<button on:click={console.log}>click me</button>"
</script>
{#html str}
While this will render a button Svelte will not add the event handler to this, but rather just render the string as you gave it (in face if you inspect the rendered markup you will still the on:click written there)

How to keep javascript updated with an editable HTML page and user-added elements at different levels

EDIT: for a general solution, this worked for me. Event binding on dynamically created elements?
So I have a interface that kind of looks like this:
User can toggle to show or hide the sublists. I used jquery to select the toggle buttons for them to work:
$(".dropdownBtn").click(function(){
//rotate the button
$(this).parent().toggleClass("caret-down");
//hide the sublist
$(this).closest("li").find(".active").toggleClass("nested");
})
They can also add new sub_elements to each element. For example, like this:
$(".fa-plus-square").click(function(){
//if there's no new list, create a new unordered list
if ($(this).closest("li").find("ul").length == 0){
$(this).parents("li").append(newUL);
//and add a toggle button
$(this).parent().prepend(toggleBtn);
}
//add the element
$(this).closest("li").find("ul").append("<li>newElement</li>")
})
But then the newly added toggle button under element 3 wouldn't respond. I believe that I need to "bind" the newly added button. But I'm not sure what's the best practice to do so.

JQuery, Creating form inputs via button not working with form list

so I have this basic bootstrap form and I have a button called add another location which will dynamically create another 4 inputs to add more location. This is achieved via jquery and jquery UI. So I made 3 copies of this form and put them in a list because eventually, they are going to come from a server and loop the form depends on however many sets of information available. The problem I am having is that, only my first add another location button works and it's creating additional inputs on the second and third one as well. I can give different id/class to the buttons where the new form goes but that wouldn't do me any good since more or fewer forms can be displayed via the server. My question is how can each button act independently without giving different id/class to it. so if I click add another location button on the second set of form, it only creates additional inputs on the second set not first or 3rd, same for 1st set and 3rd set.
this is the jquery code that clones and appends the new inputs
$("#pm-do-clone1").click(function () {
$(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});
here's my jsfiddle : https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/
ps: the fiddle the first add location is not creating new inputs, but it works on my local.Probably an external resource issue

alright, as I understand You gotta grab the clicked button by referancing it with;
$("#pm-do-clone1").click(function () {
$(this).//rest of the code
and at the rest of the code as we captured the clicked one, we now have to find its parent where we gonna add the new inputs. For example,
var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);
Edit: Btw, you are clicking an ID, ID is not the best model to catch one from multiple elemets because it sometimes make mistakes, use class instead.
Edit2: Check this snippet too. I belive this will help you. View DEMO
Edit3: Why do you wrapping each inputs into divs? It seems not necessary no create too much elements as you could achive the same result with only inputs.

Dynamically created selectors in jQuery

Hi I am trying to dynamically create a selector for jQuery instead of using a static one. The problem is, it is not working predictably/consistently.
I created a fiddle here: http://jsfiddle.net/Cc92f/
If you click run and click in each of the top radio buttons once, they work, but you cannot use the same buttons a second time.
If you click a top button, and then a bottom button, you can no longer click any of the buttons.
You may have to reload it a couple of times to see how different uses break it in different ways.
Thanks you for any and all help!
$(".concattest").click(function(event)
{
var radioid=event.target.id.split("_");
$('#r_2_'+radioid[2]).attr('checked', 'checked');
event.preventDefault();
});

Use .prop('checked',true) instead of .attr('checked','checked').
http://jsfiddle.net/5LWEk/

If you want to:
When changing selection in the top row, change value of bottom row
accordingly
When changing selection in the bottom row, select the last option in
the top row
Then use change event and prop() function, here is the demo

JQuery Mobile Listview Background Color

How can I adjust the background color of a listview item in jquery mobile? Basically I'd like a user to click a item and have it and only it highlight, very simple, so I thought.
I thought this might achieve it (.groupList is an unordered list with that class). The event is fired but nothing changes.
$(".groupList li").bind('click', function() {
logger.debug("list row click");
$(this).closest("li").siblings().attr("data-theme","a");
$(this).parents("li").attr("data-theme","e");
});
I think the reason this is broken has to do with the fact I can't seem to set data-theme dynamically at all on listviews. I also can't use the background-color css with any luck.
It seems li tags can only have their data-theme set before appending to a list, once appended I can't get it to change.
The logic I've described here works on table rows just fine. Just bind the click event to tbody tr. The jquery functions closest, siblings and parent help us turn on/off the css for the background color. Again, not entirely sure why a listview breaks this.