jQuery Replace with JavaScript functions

Question

I have the following code:

$('input.next_page_img').replaceWith('<input type="submit" class="next_page_image graybutton mediumbutton" alt="Next Page" value="Next Page" title="Next Page" onclick="Add_Search_Param('page', 2); Refine();">');

The problem is with the onclick function. It makes the rest of the script fail. When I take out the onclick function, it works. What do I need to do to fix this?

Scratch that, I've ultimately decided this was a bad idea. Instead I'd rather set the attributes of the inputs... why isn't this working though http://jsfiddle.net/qSBHH/ ?

You have a quotation mark problem. I suggest to create the element and to attach the event handler with jQuery. — Felix Kling
– Felix Kling, Commented Dec 18, 2011 at 0:19

勿绮语 · Accepted Answer · 2012-02-28 00:03:17Z

2

bookmarker = $('<span />').insertBefore('.next_page_img');
$('.next_page_img').detach().attr({type: 'submit', value: 'save'}).insertAfter(bookmarker);

edited Feb 28, 2012 at 0:03

answered Dec 18, 2011 at 0:20

勿绮语

9,3401 gold badge31 silver badges37 bronze badges

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

2 Comments

henryaaron Over a year ago

I've ultimately decided this was a bad idea. Instead I'd rather set the attributes of the inputs... why isn't this working though jsfiddle.net/qSBHH ?

henryaaron Over a year ago

I understand... I tried to implement it into my site, it resulted in two save buttons. But also, I reviewed the script and decided it was too "hack"-y for my taste. I replace the src attribute with an all text image and style the button, it came exactly how I wanted it to other than I wanted it to be text. Thank you though. Your first solution answered my initial question so I'll select your answer as correct.

Pointy · Accepted Answer · 2011-12-18 00:23:06Z

0

Since you're using jQuery anyway, it'd be a lot less messy to add the event handler with the library:

$('input.next_page_img')
  .replaceWith($('<input type="submit"/>', {
    'class': "next_page_image graybutton mediumbutton",
    'alt': "Next Page",
    'value': "Next Page",
    'title': "Next Page",
    'click': function() {
      Add_Search_Param('page', 2);
      Refine();
    }
  }));

You can jam all that on one line if you like.

answered Dec 18, 2011 at 0:23

Pointy

415k62 gold badges600 silver badges631 bronze badges

6 Comments

henryaaron Over a year ago

I've ultimately decided this was a bad idea. Instead I'd rather set the attributes of the inputs... why isn't this working though jsfiddle.net/qSBHH ?

Pointy Over a year ago

What exactly makes it a "bad idea"? It's much easier to maintain; having to quote raw JavaScript code with strings in is pretty ugly. edit oh wait -- you mean that what you were doing in the first place was a bad idea? Sorry I'm confused now :-)

Esailija Over a year ago

@Pointy, how can "click" work there. It should be same as $(elem).attr("click", function(){}) which doesn't make any sense. Am I doin' it wrong?

henryaaron Over a year ago

My whole entire idea was bad, since the onclick event changes every next page you go to...

Pointy Over a year ago

@Esailija Note that I wrapped the <input> in its own jQuery call. When you're calling jQuery to create a node, you can pass a second object argument with attributes to set. The library knows to look for the handler names there. It also recognizes "css" and checks if its value is an object.

|

Esailija · Accepted Answer · 2011-12-18 00:26:27Z

0

Why don't you just do this:

$('input.next_page_img').replaceWith($("<input>", {
    type: "submit",
   "class": "next_page_image graybutton mediumbutton",
    alt: "Next Page",
    value: "Next Page",
    title: "Next Page"
}).bind("click", function() {
    Add_Search_Param('page', 2);
    Refine();
}));

answered Dec 18, 2011 at 0:26

Esailija

140k24 gold badges280 silver badges328 bronze badges

1 Comment

henryaaron Over a year ago

I've ultimately decided this was a bad idea. Instead I'd rather set the attributes of the inputs... why isn't this working though jsfiddle.net/qSBHH ?

Collectives™ on Stack Overflow

jQuery Replace with JavaScript functions

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related