Dynamically append element jquery and javascript class

Question

Now: It makes hello button well, but when I click it, nothing happens.

Question:
I want to see alert or console.log

How can I do that?

My Code:

class ArtObj {
  constructor(string) {
    this.text = string
  }

  append_content(wrapper) {
    var div = $("<a id='hello' href='#'>hello</a>")

    div.find("#hello").on("click", function(e) {
      e.preventDefault()
      console.log(this.text)
      alert(this.text)
    });

    wrapper.append(div)
  }
}

art1 = new ArtObj("string_zz")
art1.append_content($("#artifact_wrapper"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="artifact_wrapper"> </div>

You can only bind the event after you appended it to the wrapper — Alon Eitan
– Alon Eitan, Commented Dec 16, 2020 at 13:20
@AlonEitan that's not correct. You can bind events to a jquery object before appending. You can't bind events to DOM elements that don't exist, but that's (subtly) different. — fdomn-m
– fdomn-m, Commented Dec 16, 2020 at 16:29
Oh I see it now, thanks for clarifying @freedomn-m and sorry for the late reply :) — Alon Eitan
– Alon Eitan, Commented Dec 17, 2020 at 7:24

Pirate · Accepted Answer · 2020-12-16 13:20:37Z

3

You cannot do div.find because your div variable itself is an a tag with id hello. Just add event on variable div directly.

I would rename variable to a, so there is no confusion.

class ArtObj {

  constructor(string) {
    this.text = string
  }

  append_content(wrapper) {
    var div = $("<a id='hello' href='#'>hello</a>")

    div.on("click", function(e) {
      e.preventDefault()
      console.log(this.text)
      alert(this.text)
    });

    wrapper.append(div)
  }

}

art1 = new ArtObj("string_zz")
art1.append_content($("#artifact_wrapper"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="artifact_wrapper">

</div>

answered Dec 16, 2020 at 13:20

Pirate

1,1851 gold badge10 silver badges21 bronze badges

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

Comments

Roko C. Buljan · Accepted Answer · 2020-12-16 14:04:02Z

A better way to create a new jQuery Element is by passing the Element options as the second parameter

jQuery DOCS- Creating New Elements
As of jQuery 1.8, any jQuery instance method (a method of jQuery.fn) can be used as a property of the object passed to the second parameter

Define the click inside the Element options - no need to attach unnecessary listeners to other elements like "body" or document, etc.
Would be nice to define the this.$el right at init inside the constructor, that way, your append function would do exactly what it says.
Makes more sense to call a function by what it does, and that's something.append_to(somewhere), not append_content. Actually, you don't need that method at all if you already use jQuery.

class ArtObj {
  constructor(string) {
    this.text = string;
    this.$ = $("<a>", {
      id: "hello",
      text: "hello",
      href: "#",
      click: (e) => {
        e.preventDefault()
        console.log(this.text)
      }
    });
  }
}

const art1 = new ArtObj("string_zz");
art1.$.appendTo("#artifact_wrapper");

<div id="artifact_wrapper"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Since it makes no sense to create a class that generates a reusable component with a fixed ID, makes more sense to allow the user of your class to pass into the desired bits and pieces:

class ArtObj {
  constructor(options) {
    this.$ = $("<a>", options);
  }
}

const art1 = new ArtObj({
  id: "hello_1", // ID must be unique!
  text: "hello",
  href: "#",
  click: (e) => {
    e.preventDefault();
    console.log("string_zz");
  }
});
art1.$.appendTo("#artifact_wrapper");

<div id="artifact_wrapper"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

therefore, given the above, seems unnecessary to use a class at all:

$("<a>", {
  id: "hello_1", // ID must be unique!
  text: "hello",
  href: "#",
  click: (e) => {
    e.preventDefault();
    console.log("string_zz");
  },
  appendTo: "#artifact_wrapper"
});

<div id="artifact_wrapper"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

shrishail sh · Accepted Answer · 2020-12-16 13:31:00Z

2

Check this. Your script was not in proper order and jQuery find function need to be used on parent elements.

class ArtObj {
  constructor(string) {
    this.text = string
  }

  append_content(wrapper) {
    wrapper.append("<a id='hello' href='#'>hello</a>");
    wrapper.find("#hello").on("click", function(e) {
      e.preventDefault()
      console.log(this.text)
      alert(this.text)
    });
  }
}

art1 = new ArtObj("string_zz")
art1.append_content($("#artifact_wrapper"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="artifact_wrapper"> </div>

answered Dec 16, 2020 at 13:31

shrishail sh

2703 silver badges10 bronze badges

Collectives™ on Stack Overflow

Dynamically append element jquery and javascript class

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related