Add an element with many parameters in jQuery

Question

How to add an element with many parameter using jQuery?

I've tried the following but did not succeed:

var appendNewStoredFile = '<a href="javascript:void(0)" data-bind="event: {click: function (){ LoadQuery(viewModel,';
appendNewStoredFile += fileName;
appendNewStoredFile += ',';
appendNewStoredFile += TypesOutput
appendNewStoredFile += ',';
appendNewStoredFile += '1';
appendNewStoredFile += ');}}" class="list-group-item ItemInList" style="background-color: beige"><span style="margin: 0 5px">';
appendNewStoredFile += fileName;
appendNewStoredFile += '</span></a>';
$('#StoredQuery').append(appendNewStoredFile);

Output:

<a href="javascript:void(0)" 
   data-bind="event: {click: function (){ LoadQuery(viewModel,Test-Error,T_Motors,1);}}" 
   class="list-group-item ItemInList" style="background-color: beige">
  <span style="margin: 0 5px">Test-Error</span>
</a>

Parameters are not included in quotation. I want be like:

<a href="javascript:void(0)" 
   data-bind="event: {click: function () { LoadQuery(viewModel,'Test-Error','T_Motors',1);}}" 
   class="list-group-item ItemInList" 
   style="background-color: beige">
  <span style="margin: 0 5px">Test-Error</span>
</a>

I don't know, but i would try this: LoadQuery(this) and then after adding the element, select it and $(element).data("file-name", fileName); and for the others parameters. Inside the function, access it by data() function. — DontVoteMeDown
– DontVoteMeDown, Commented Dec 30, 2013 at 12:18

Ram · Accepted Answer · 2013-12-30 12:53:18Z

4

If you are using jQuery you can pass an object to it instead of using string concatenation:

$('<a/>', {
    // setting attributes
    href: "#",
    "class": "whatever",
    foo: "bar",
    // setting data-* properties:
    // if you want to store the datum as an attribute and not a property 
    // use `data-*` instead of using `data` object
    // `data` object is set by `.data()` method 
    // and `data-*` property is set by `.attr()` method 
    data: {
       bind: { foo: 'bar' }
    },
    'data-bind': "value",
    // setting html content
    html: '<element>...</element>',
    // event handling
    click: function(e) {
      // e.preventDefault();
    },
    // setting styles
    css: { color: 'red' } 
}).appendTo('#StoredQuery');

edited Dec 30, 2013 at 12:53

answered Dec 30, 2013 at 12:19

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arun P Johny Over a year ago

not the same markup as requested by the OP... can be changed to jsfiddle.net/arunpjohny/8jHVD/1 .... because from the looks of it the data-bind attribute might be used by some other library

Gabriele Petrioli · Accepted Answer · 2013-12-30 12:27:28Z

0

You will need to wrap your variables with '

        appendNewStoredFile += '\''+ fileName + '\'',
        appendNewStoredFile += '\''+ TypesOutput + '\''

But there is a better way to approach dynamic DOM element creation..

$('<a>',{
   click: function(){ loadQuery(viewModel, filename, TypesOutput,1);},
   'class': 'list-group-item ItemInList',
   css: {color:'beige'},
   html: $('<span>',{
             css: {margin: '0 5px'},
             text: filename
         })
}).appendTo('#StoredQuery');

answered Dec 30, 2013 at 12:27

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Collectives™ on Stack Overflow

Add an element with many parameters in jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related