Ich habe also ein Div, das viele Schaltflächen enthält, die dynamisch erstellt werden. Mit folgendem:

var s = document.getElementById("CancelColumn").innerHTML;
s = s+ "<input class=\"CancelButt\" type=\"button\" value=\"X\" onclick=\"deleteRow(\""+value+"\",this)\">" ;
document.getElementById("CancelColumn").innerHTML = s;

Das Problem ist jedoch, dass in Firefox das HTML wie folgt angezeigt wird:

<input class="CancelButt" type="button" SomeString",this)"="" onclick="deleteRow(" value="X"></input>

Dabei lautet der Wert "SomeString".

In Chrom ist es allerdings etwas anders. Die Zeichenfolge hat ein zusätzliches Leerzeichen und das Tag scheint nicht richtig zu funktionieren. Hier ist es:

Ich möchte, dass es Folgendes zeigt:

Wobei "dies" die Schaltfläche ist, die die Funktion aufruft.

Irgendwelche Vorschläge?

0
Kelsey Abreu 7 Dez. 2013 im 12:21

5 Antworten

Beste Antwort

Ich bin mir nicht sicher, warum dies geschieht, aber Sie sollten Ihren Code trotzdem verbessern. Hier ist ein Beispiel für verbesserten Code.

var element = document.getElementById('CancelColumn');
    newInput = document.createElement('input');

newInput.type = 'button';
newInput.value = 'X';
newInput.className = 'CancelButt';
newInput.onclick = deleteRow.bind(null, value, newInput); // whatever value is?

element.appendChild(newInput);

Es ist viel sauberer und lesbarer. Ich bin nicht überrascht, dass Sie Probleme mit dem Code haben, den Sie haben.

3
iConnor 7 Dez. 2013 im 08:28

Ich bin mir nicht sicher, ob ich Ihre Frage richtig verstehe ... Möchten Sie ein Div haben, das Sie dynamisch mit Schaltflächen füllen, und wenn Sie auf eine dieser Schaltflächen klicken, werden sie zu einem anderen Div verschoben?

In diesem Fall ähnelt Ihre Frage meiner Meinung nach dieser Frage - Gewusst wie ein Element in ein anderes Element verschieben?

Von Alejandro Illecas Antwort:

BEWEGEN:

jQuery ("# NodesToMove"). attach (). appendTo ('# DestinationContainerNode')

KOPIEREN:

jQuery ("# NodesToMove"). appendTo ('# DestinationContainerNode')

note .detach () verwenden. Seien Sie beim Kopieren vorsichtig und duplizieren Sie keine IDs.


JSFiddle

Ich habe seine Lösung in diesem JSFiddle geändert, in dem Sie sehen können, dass Sie Sie benötigen kein sehr umständliches Skript, um eine Verschiebung eines Elements zu verwalten.

JQuery

function moveButton(elem){
   if( $(elem).parent().attr("id") == "nonSelected" ){
      $(elem).detach().appendTo('#selected');
   }
   else{
      $(elem).detach().appendTo('#nonSelected'); 
   }
}

HTML

Wie Sie hier sehen können, können Sie auch verschiedene Arten von Elementen verwenden ...

<div id="nonSelected">

   <!-- TWO INPUT TAGS --> 
   <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="Default" />
   <input id="btnPrimary" onclick="moveButton(this)" type="button" class="btn btn-primary" value="Primary" />

   <!-- THREE BUTTON TAGS -->
   <button id="btnDanger" onclick="moveButton(this)" type="button" class="btn btn-danger">Danger</button>
   <button id="btnWarning" onclick="moveButton(this)" type="button" class="btn btn-warning">Warning</button>
   <button id="btnSuccess" onclick="moveButton(this)" type="button" class="btn btn-success">Success</button>

</div>


<div id="selected">

</div>
0
Community 23 Mai 2017 im 12:13

Versuche dies

s = s+ "<input class='CancelButt' type='button' value='X' onclick='deleteRow('"+value+"',this)'>" ;
0
Yevgeniy.Chernobrivets 7 Dez. 2013 im 08:25

Scheint so unelegant zu sein

Warum nicht versuchen?

var inp = document.createElement('input');
inp.setAttribute('class', 'CancelButt');
inp.setAttribute('type', 'button');
inp.setAttribute('value', 'X');
inp.onclick = deleteRow.bind(inp, 2, inp); // you don't really need to pass the 'this' value to the deleteRow function though

Dann können Sie einfach das inp an Ihr #CancelColumn anhängen

1
tewathia 7 Dez. 2013 im 08:47

Wie wäre es damit:

s = s +  "<input class='CancelButt' type='button' value='X'
             onclick='deleteRow("+value+",this)'/>";
0
Joke_Sense10 7 Dez. 2013 im 08:35