jQuery - How to make element not execute onclick function from parent? - javascript

In this example I have the onclick function on the main div and i dont want the button to execute the same onclick, only execute its own? how should i paroach this?
<div onclick="$('#extra-info').slideToggle();" class="card card-body item">
<div class="row">
<h6 style="position:absolute;left:2%;">Comanda #1</h6>
<h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
<div class="col col-md-10">
<h5>Cristian Cutitei</h5>
<h6>0737032567</h6>
</div>
<div>
<button id="status" onclick="checkText('#status', 2);" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
</div>
</div>
<div id="extra-info" style="display:none;">
<br>
</div>
Thank you in advance!


You can do that by calling event.stopPropagation(); in the button.
<button id="status" onclick="checkText('#status', 2); event.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
Read more about it from Here
But I would suggest a cleaner solution,
Separate the card body from the card footer where the button exist.
<div class="card card-body item">
<div onclick="$('#extra-info').slideToggle();">
<div class="row">
<h6 style="position:absolute;left:2%;">Comanda #1</h6>
<h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
<div class="col col-md-10">
<h5>Cristian Cutitei</h5>
<h6>0737032567</h6>
</div>
</div>
</div>
<div>
<button id="status" onclick="e => e.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
</div>
</div>
<div id="extra-info" style="display:none;">
<br>
</div>

Related

Replace button with another button

I am making a CV builder, and I already made a button with jQuery to add and delete a form, but when I add, it just goes down, so I can add more, but the first form stays there, and I cannot delete the first form.
Example
You see how it goes down, and I need a button so I can remove the first one also:
As you can see in the pictures, i add a form, and a form comes up, but the add button moves down, as it should, because I put it aside of the div. But I need to add a red button to delete the first form, if someone wants to.
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
});
})(this.jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
Snimite promene
</div>
</div>

Consider the following.
$(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
if (!$(this).hasClass("clicked")) {
console.log("Adding Button");
$("<div>", {
class: "input-group-btn"
}).appendTo($(".row:eq(0) .input-group:eq(0)").eq(0));
$("<button>", {
class: "btn btn-danger remove",
type: "button"
}).html("<span class='button ripple-effect' style='background-color: #B31C1C;'>Ukloni</span>").appendTo($(".row:eq(0) .input-group:eq(0) .input-group-btn"));
$(this).addClass("clicked");
}
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
Snimite promene
</div>
</div>
It seems you only want to add the button the first click. We can check to see if a Class exists as a quick check, if it does NOT exists, we can perform the one-time action, and add the Class.
Then it is just a matter of adding the proper elements.

jquery - parent element not being removed [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 1 year ago.
The code:
$('.del').click(function(e){
$(this).parents('.order-item').remove();
if($('.order-item').length == 0){
$('#order-items').append(Data.order_item_clone)
}
})
What am I doing wrong? As you can see, I am trying to remove the parent element '.order-item' based on the '.del' element clicked. Nothing is happening. This is what the html looks like:
<div class="col-md-3" id="order-items">
<div class="order-item">
<div class="col-md-1 nhp" id="side">
</div>
<div class="col-md-7 nhp">
<div class="col-md-3 obox-num obox">
</div>
<div class="col-md-9 obox-purity obox">
</div>
<div class="col-md-4 obox-info obox-price obox">
</div>
<div class="col-md-4 obox-info obox-weight obox">
</div>
<div class="col-md-4 obox-info obox-total-price obox">
</div>
</div>
<div class="col-md-2 nhp">
<button class="del" style="width:100%; height:77px"> Del </button>
</div>
<div class="col-md-2 nhp">
<button class="print" style="width:100%; height:77px"> Print </button>
</div>
</div>
</div>
For the most part, this html is generated dynamically with javascript/jquery. Can anyone help? Thanks in advance
Edit: When I do $('.del').eq(0).parents('.order-item').remove() things work find, so there is something wrong with $(this)

$(document).on('click','.del', function(e){
$(this).parents('.order-item').remove();
if($('.order-item').length == 0){
alert("append now");
// $('#order-items').append(Data.order_item_clone)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3" id="order-items">
<div class="order-item">
<div class="col-md-1 nhp" id="side">
</div>
<div class="col-md-7 nhp">
<div class="col-md-3 obox-num obox">
alpha
</div>
<div class="col-md-9 obox-purity obox">
beta
</div>
<div class="col-md-4 obox-info obox-price obox">
gamma
</div>
<div class="col-md-4 obox-info obox-weight obox">
yellow
</div>
<div class="col-md-4 obox-info obox-total-price obox">
blue
</div>
</div>
<div class="col-md-2 nhp">
<button class="del" style="width:100%; height:77px"> Del </button>
</div>
<div class="col-md-2 nhp">
<button class="print" style="width:100%; height:77px"> Print </button>
</div>
</div>
</div>
Since you mentioned, the html are loaded dynamically, you need to bind the click to document and capture the element.
$(document).on('click','.del', function(e){

bootstrap: how to pass text value to button?

I have two form fields.if clicked the text from <div class="offer-text"> RS.750/- </div> the RS.750/- could be appear in the button. since I am new to bootstrap. Can anyone help me to do this?
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<form method="POST" action="information.php">
<div class="">
<button type="submit" name="submit" class="button button-block"/>SEND</button>
</div>
</form>
</div>
<div class="col-sm-3"></div>
</div>
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form2">
<div class="row">
<div class="column">
<div class="offer-text"> RS.750/- </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3"></div>

To send the value to the form button use the following code:
$(".offer-text").click(function() {
$("form button[type=submit]").text($(this).text())
})
demo
$(".offer-text").click(function() {
$("form button[type=submit]").text($(this).text())
})
$("img").click(function() {
$("form button[type=submit]").text($(this).attr("value"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<form method="POST" action="information.php">
<div class="">
<button type="submit" name="submit" class="button button-block" />SEND</button>
</div>
</form>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-3"> </div>
<div class="col-sm-6">
<div class="form2">
<div class="row">
<div class="column">
<div class="offer-text"> RS.750/- </div>
</div>
</div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
<img src="img/Sar Utha Kay Jeo.png" alt="IMG" style="width:100%" value="RS.1750/-" class="hover-shadow cursor">

How to merge multiple Backbone collection divs into one (To fix the HTML layout)

I am working on a backbone collection view. Collections are shown as rows using a div. Each row contains child views (cells).
My problem is, I need to make it appear as if there's only one collection, that is, the cells will be merged together into a single parent div. Please see my illustration below:
Markup:
<div class="team-container container" data-view="Sports.View">
<div class="team-row clearfix" data-view="Athletes.View">
<div class="col-sm-8 team-row">
<h1>Surf</h1>
</div>
<div class="col-sm-8 team-cell">
<div class="va-container-anchor">
<div class="feat-image"><img src="http://us.billabong.sb1.sandbox.netsuitestaging.com/assets-bbg/images/content/laura-enever.jpg" alt="" class="fit-team-image"></div>
<div class="va-container-hover">
<a href="/team/laura-enever" data-hashtag="#team/laura-enever" class="holder">
<div class="content">
<div class="text"> Laura Enever </div>
</div>
</a>
</div>
<div class="copy-block">
<small>Pro Surf</small>
<h2>Laura Enever</h2>
<a class="btn btn-primary btn-lg btn-block" href="/team/laura-enever" data-hashtag="#team/laura-enever">Explore</a>
</div>
</div>
</div>
<div class="col-sm-8 team-cell">
<div class="va-container-anchor">
<div class="feat-image"><img src="/images/content/laura-enever.jpg" alt="" class="fit-team-image"></div>
<div class="va-container-hover">
<a href="/team/laura-enever-2" data-hashtag="#team/laura-enever-2" class="holder">
<div class="content">
<div class="text"> Laura Enever </div>
</div>
</a>
</div>
<div class="copy-block">
<small>Pro Surf</small>
<h2>Laura Enever</h2>
<a class="btn btn-primary btn-lg btn-block" href="/team/laura-enever-2" data-hashtag="#team/laura-enever-2">Explore</a>
</div>
</div>
</div>
<div class="col-sm-8 team-cell">
<div class="va-container-anchor">
<div class="feat-image"><img src="/images/content/courtney_conlogue_profile.jpg" alt="" class="fit-team-image"></div>
<div class="va-container-hover">
<a href="/team/courtney-conlogue" data-hashtag="#team/courtney-conlogue" class="holder">
<div class="content">
<div class="text"> Courtney Conlogue </div>
</div>
</a>
</div>
<div class="copy-block">
<small>Pro Surf</small>
<h2>Courtney Conlogue</h2>
<a class="btn btn-primary btn-lg btn-block" href="/team/courtney-conlogue" data-hashtag="#team/courtney-conlogue">Explore</a>
</div>
</div>
</div>
</div>
<div class="team-row clearfix" data-view="Athletes.View">
<div class="col-sm-8 team-row">
<h1>Snow</h1>
</div>
<div class="col-sm-8 team-cell">
<div class="va-container-anchor">
<div class="feat-image"><img src="/images/content/helen_profile.jpg" alt="" class="fit-team-image"></div>
<div class="va-container-hover">
<a href="/team/helen-schettini" data-hashtag="#team/helen-schettini" class="holder">
<div class="content">
<div class="text"> Helen Schettini </div>
</div>
</a>
</div>
<div class="copy-block">
<small>Pro Snow</small>
<h2>Helen Schettini</h2>
<a class="btn btn-primary btn-lg btn-block" href="/team/helen-schettini" data-hashtag="#team/helen-schettini">Explore</a>
</div>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated.

Bootstrap grid columns not stacking before content overlaps

I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example

Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).

Categories